新生报到移动端V1.0
This commit is contained in:
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="box">
|
||||
<view class="atom"></view>
|
||||
<view class="atom"></view>
|
||||
<view class="atom"></view>
|
||||
<view class="dot"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading-atom',
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.box {
|
||||
position: relative;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.dot{
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #0396FF;
|
||||
animation: dotbreath 2s linear infinite;
|
||||
}
|
||||
.atom {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border-left-width: 6rpx;
|
||||
border-top-width: 6rpx;
|
||||
border-left-color: #0396FF;
|
||||
border-left-style: solid;
|
||||
border-top-style: solid;
|
||||
border-top-color: transparent;
|
||||
|
||||
}
|
||||
.atom:nth-of-type(1) {
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
animation: atom1 1s linear infinite;
|
||||
}
|
||||
.atom:nth-of-type(2) {
|
||||
right: 0%;
|
||||
top: 0%;
|
||||
animation: atom2 1s linear infinite;
|
||||
}
|
||||
.atom:nth-of-type(3) {
|
||||
right: 0%;
|
||||
bottom: 0%;
|
||||
animation: atom3 1s linear infinite;
|
||||
}
|
||||
@keyframes dotbreath {
|
||||
0% {
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
50%{
|
||||
opacity:0.5;
|
||||
}
|
||||
100%{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
@keyframes atom1 {
|
||||
0% {
|
||||
transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes atom2 {
|
||||
0% {
|
||||
transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes atom3 {
|
||||
0% {
|
||||
transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="dot dot1"></view>
|
||||
<view class="dot dot2"></view>
|
||||
<view class="dot dot3"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "loading-bounce",
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 50rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
.dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: #007AFF;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: calc(50% - 5rpx);
|
||||
}
|
||||
|
||||
.dot1 {
|
||||
background: #1FA2FF;
|
||||
left: 0rpx;
|
||||
-webkit-animation: bounce 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
|
||||
animation: bounce 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
|
||||
}
|
||||
|
||||
.dot2 {
|
||||
background: #12D8FA;
|
||||
left: 25rpx;
|
||||
-webkit-animation: bounce 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
|
||||
animation: bounce 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
|
||||
}
|
||||
|
||||
.dot3 {
|
||||
background: #29ffc6;
|
||||
left: 50rpx;
|
||||
-webkit-animation: bounce 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
|
||||
animation: bounce 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bounce {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateY(-15rpx);
|
||||
transform: translateY(-15rpx);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateY(-15rpx);
|
||||
transform: translateY(-15rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="loader"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "loading-circle",
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.loader {
|
||||
display: block;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid transparent;
|
||||
border-top-color: #1FA2FF;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loader::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
left: 8rpx;
|
||||
right: 8rpx;
|
||||
bottom: 8rpx;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid transparent;
|
||||
border-top-color: #12D8FA;
|
||||
-webkit-animation: spin 3s linear infinite;
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
|
||||
.loader::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 16rpx;
|
||||
left: 16rpx;
|
||||
right: 16rpx;
|
||||
bottom: 16rpx;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid transparent;
|
||||
border-top-color: #29ffc6;
|
||||
-webkit-animation: spin 1.5s linear infinite;
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="eye"></view>
|
||||
<view class="eye"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading-eyes',
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
width: 110rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
background: linear-gradient(135deg, #1fa2ff, #12d8fa);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.eye:after {
|
||||
background-color: #ffffff;
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
border-radius: 50%;
|
||||
left: 20rpx;
|
||||
top: 24rpx;
|
||||
position: absolute;
|
||||
content: '';
|
||||
-webkit-animation: eyeball 1s linear infinite alternate;
|
||||
-moz-animation: eyeball 1s linear infinite alternate;
|
||||
animation: eyeball 1s linear infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes eyeball {
|
||||
0% {
|
||||
left: 30rpx;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes eyeball {
|
||||
0% {
|
||||
left: 30rpx;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes eyeball {
|
||||
0% {
|
||||
left: 30rpx;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 2rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="box">
|
||||
<view class="gear1">
|
||||
<view class="inner inner1"> </view>
|
||||
<view class="inner inner2"> </view>
|
||||
<view class="inner inner3"> </view>
|
||||
</view>
|
||||
<view class="gear2">
|
||||
<view class="inner inner1"> </view>
|
||||
<view class="inner inner2"> </view>
|
||||
<view class="inner inner3"> </view>
|
||||
</view>
|
||||
<view class="gear3">
|
||||
<view class="inner inner1"> </view>
|
||||
<view class="inner inner2"> </view>
|
||||
<view class="inner inner3"> </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading-gear',
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$size:80rpx;
|
||||
$bgc:red;
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@mixin gear($size:$size, $bgc:$bgc) {
|
||||
width: $size;
|
||||
height: $size;
|
||||
.inner {
|
||||
position: absolute;
|
||||
width: $size;
|
||||
height: $size;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: $bgc;
|
||||
border-radius: 6rpx;
|
||||
mask: radial-gradient(transparent 40%, #fff 60%);
|
||||
}
|
||||
|
||||
.inner2 {
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
|
||||
.inner3 {
|
||||
transform: rotate(240deg);
|
||||
}
|
||||
|
||||
// &:after {
|
||||
// position: absolute;
|
||||
// content: '';
|
||||
// background: #fff;
|
||||
// width: $size / 1.8;
|
||||
// height: $size / 1.8;
|
||||
// border-radius: 100%;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// }
|
||||
}
|
||||
|
||||
.gear1 {
|
||||
@include gear(60rpx,#0396FF);
|
||||
position: absolute;
|
||||
top: 35rpx;
|
||||
left: 35rpx;
|
||||
animation: rotate 5s infinite linear;
|
||||
}
|
||||
|
||||
.gear2 {
|
||||
@include gear(50rpx, #dd524d);
|
||||
position: absolute;
|
||||
top: 50rpx;
|
||||
left: 110rpx;
|
||||
animation: rotateR 5s infinite linear;
|
||||
}
|
||||
.gear3 {
|
||||
@include gear(50rpx, #f0ad4e);
|
||||
position: absolute;
|
||||
top: 110rpx;
|
||||
left: 50rpx;
|
||||
animation: rotateR 5s infinite linear;
|
||||
}
|
||||
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
@keyframes rotateR {
|
||||
from {
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "loading-love",
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: linear-gradient(to bottom, #F00000, #e73827);
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.item:nth-child(1) {
|
||||
animation: love1 4s infinite;
|
||||
}
|
||||
|
||||
.item:nth-child(2) {
|
||||
animation: love2 4s infinite;
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
|
||||
.item:nth-child(3) {
|
||||
animation: love3 4s infinite;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.item:nth-child(4) {
|
||||
animation: love4 4s infinite;
|
||||
animation-delay: 0.45s;
|
||||
}
|
||||
|
||||
.item:nth-child(5) {
|
||||
|
||||
animation: love5 4s infinite;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.item:nth-child(6) {
|
||||
animation: love4 4s infinite;
|
||||
animation-delay: 0.75s;
|
||||
}
|
||||
|
||||
.item:nth-child(7) {
|
||||
animation: love3 4s infinite;
|
||||
animation-delay: 0.9s;
|
||||
}
|
||||
|
||||
.item:nth-child(8) {
|
||||
animation: love2 4s infinite;
|
||||
animation-delay: 1.05s;
|
||||
}
|
||||
|
||||
.item:nth-child(9) {
|
||||
animation: love1 4s infinite;
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
|
||||
|
||||
@keyframes love1 {
|
||||
|
||||
30%,
|
||||
50% {
|
||||
height: 50rpx;
|
||||
transform: translateY(-20rpx);
|
||||
}
|
||||
|
||||
75%,
|
||||
100% {
|
||||
height: 20rpx;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes love2 {
|
||||
|
||||
30%,
|
||||
50% {
|
||||
height: 90rpx;
|
||||
transform: translateY(-25rpx);
|
||||
}
|
||||
|
||||
75%,
|
||||
100% {
|
||||
height: 20rpx;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes love3 {
|
||||
|
||||
30%,
|
||||
50% {
|
||||
height: 120rpx;
|
||||
transform: translateY(-20rpx);
|
||||
}
|
||||
|
||||
75%,
|
||||
100% {
|
||||
height: 20rpx;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes love4 {
|
||||
|
||||
30%,
|
||||
50% {
|
||||
height: 130rpx;
|
||||
transform: translateY(-10rpx);
|
||||
}
|
||||
|
||||
75%,
|
||||
100% {
|
||||
height: 20rpx;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes love5 {
|
||||
|
||||
30%,
|
||||
50% {
|
||||
height: 130rpx;
|
||||
transform: translateY(10rpx);
|
||||
}
|
||||
|
||||
75%,
|
||||
100% {
|
||||
height: 20rpx;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// .item:nth-child(1) {
|
||||
// height: 50rpx;
|
||||
// transform: translateY(-20rpx);
|
||||
// }
|
||||
|
||||
// .item:nth-child(2) {
|
||||
// height: 90rpx;
|
||||
// transform: translateY(-25rpx);
|
||||
// }
|
||||
|
||||
// .item:nth-child(3) {
|
||||
// height: 120rpx;
|
||||
// transform: translateY(-20rpx);
|
||||
// }
|
||||
|
||||
// .item:nth-child(4) {
|
||||
// height: 130rpx;
|
||||
// transform: translateY(-10rpx);
|
||||
// }
|
||||
|
||||
// .item:nth-child(5) {
|
||||
// height: 130rpx;
|
||||
// transform: translateY(10rpx);
|
||||
// }
|
||||
|
||||
// .item:nth-child(6) {
|
||||
// height: 130rpx;
|
||||
// transform: translateY(-10rpx);
|
||||
// }
|
||||
|
||||
// .item:nth-child(7) {
|
||||
// height: 120rpx;
|
||||
// transform: translateY(-20rpx);
|
||||
// }
|
||||
|
||||
// .item:nth-child(8) {
|
||||
// height: 90rpx;
|
||||
// transform: translateY(-25rpx);
|
||||
// }
|
||||
|
||||
// .item:nth-child(9) {
|
||||
// height: 50rpx;
|
||||
// transform: translateY(-20rpx);
|
||||
// }
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="pulse-bubble pulse-bubble-1"></view>
|
||||
<view class="pulse-bubble pulse-bubble-2"></view>
|
||||
<view class="pulse-bubble pulse-bubble-3"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "loading-pulse",
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* pulse */
|
||||
.container {
|
||||
width: 100rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.pulse-bubble {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background: #007AFF;
|
||||
}
|
||||
|
||||
.pulse-bubble-1 {
|
||||
background: #1FA2FF;
|
||||
animation: pulse .4s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
.pulse-bubble-2 {
|
||||
background: #12D8FA;
|
||||
animation: pulse .4s ease .2s infinite alternate;
|
||||
}
|
||||
|
||||
.pulse-bubble-3 {
|
||||
background: #29ffc6;
|
||||
animation: pulse .4s ease .4s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: .25;
|
||||
transform: scale(.75);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="radar">
|
||||
<view class="dot dot-1"></view>
|
||||
<view class="dot dot-2"></view>
|
||||
<view class="dot dot-3"></view>
|
||||
<view class="cover"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "loading-radar",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$size: 180rpx;
|
||||
$dotSize: 4rpx;
|
||||
$maincolor: #2da3f6;
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.radar {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: $size;
|
||||
width: $size;
|
||||
background: -webkit-repeating-radial-gradient(rgba(45, 163, 246, 0) 0%,
|
||||
rgba(45, 163, 246, 0) 23%,
|
||||
rgba(45, 163, 246, 0.7) 24%,
|
||||
rgba(45, 163, 246, 0) 25%);
|
||||
margin: 0 auto;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid rgba(45, 163, 246, 0.7);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.radar::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: $dotSize;
|
||||
height: $dotSize;
|
||||
background: $maincolor;
|
||||
margin-left: -1rpx;
|
||||
margin-top: -1rpx;
|
||||
border-radius: 1rpx;
|
||||
}
|
||||
|
||||
.dot {
|
||||
position: absolute;
|
||||
width: $dotSize;
|
||||
height: $dotSize;
|
||||
background: $maincolor;
|
||||
opacity: 0;
|
||||
border-radius: 50%;
|
||||
animation: breath 3s linear infinite;
|
||||
box-shadow: 0 0 2rpx 2rpx rgba(45, 163, 246, 0.5);
|
||||
}
|
||||
|
||||
|
||||
.dot-1 {
|
||||
top: 50rpx;
|
||||
left: 30rpx;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.dot-2 {
|
||||
top: 60rpx;
|
||||
right: 20rpx;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.dot-3 {
|
||||
top: 140rpx;
|
||||
right: 100rpx;
|
||||
animation-delay: 2.3s;
|
||||
}
|
||||
|
||||
.cover {
|
||||
transform-origin: bottom right;
|
||||
border-right: 1rpx solid $maincolor;
|
||||
background: linear-gradient(45deg,
|
||||
rgba(255, 255, 255, 0) 45%,
|
||||
$maincolor 100%);
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
animation: rotation 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes breath {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="box">
|
||||
<view class="sun"></view>
|
||||
<view class="orbit orbit1">
|
||||
<view class="planetX planet1"></view>
|
||||
</view>
|
||||
<view class="orbit orbit2">
|
||||
<view class="planetX planet2"></view>
|
||||
</view>
|
||||
<view class="orbit orbit3">
|
||||
<view class="planetX planet3"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "loading-triangle",
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.box{
|
||||
width:300rpx;
|
||||
height:300rpx;
|
||||
position: relative;
|
||||
}
|
||||
.sun {
|
||||
background: radial-gradient(#ff0, #f90);
|
||||
height: 50rpx;
|
||||
width: 50rpx;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.planetX {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.planet1 {
|
||||
left: 20rpx;
|
||||
height: 13rpx;
|
||||
width: 13rpx;
|
||||
background-color: #fed313;
|
||||
}
|
||||
|
||||
.planet2 {
|
||||
left: 23rpx;
|
||||
height: 20rpx;
|
||||
width: 20rpx;
|
||||
background: linear-gradient(#00ff00, #09f, #09f);
|
||||
-webkit-animation: rotation 1s infinite linear;
|
||||
animation: rotation 1s infinite linear;
|
||||
}
|
||||
|
||||
.planet3 {
|
||||
left: 49rpx;
|
||||
height: 17rpx;
|
||||
width: 17rpx;
|
||||
background: radial-gradient(#ff9900, #ff4400);
|
||||
}
|
||||
|
||||
.orbit {
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
border: 1rpx solid #cccccc;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.orbit1 {
|
||||
height: 100rpx;
|
||||
width: 100rpx;
|
||||
-webkit-animation: rotation 2s infinite linear;
|
||||
-moz-animation: rotation 2s infinite linear;
|
||||
animation: rotation 2s infinite linear;
|
||||
}
|
||||
|
||||
.orbit2 {
|
||||
height: 150rpx;
|
||||
width: 150rpx;
|
||||
-webkit-animation: rotation 3s infinite linear;
|
||||
-moz-animation: rotation 3s infinite linear;
|
||||
animation: rotation 3s infinite linear;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.orbit3 {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
-moz-animation: rotation 6s infinite linear;
|
||||
-webkit-animation: rotation 6s infinite linear;
|
||||
animation: rotation 6s infinite linear;
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotation {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes rotation {
|
||||
from {
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
-moz-transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="box">
|
||||
<view class="sword"></view>
|
||||
<view class="sword"></view>
|
||||
<view class="sword"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading-sword',
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.box {
|
||||
position: relative;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.sword {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.sword:nth-of-type(1) {
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
border-bottom: 8rpx solid #ED213A;
|
||||
animation: sword1 1s linear infinite;
|
||||
}
|
||||
.sword:nth-of-type(2) {
|
||||
right: 0%;
|
||||
top: 0%;
|
||||
border-right: 8rpx solid #ED213A;
|
||||
animation: sword2 1s linear infinite;
|
||||
}
|
||||
.sword:nth-of-type(3) {
|
||||
right: 0%;
|
||||
bottom: 0%;
|
||||
border-top: 8rpx solid #ED213A;
|
||||
animation: sword3 1s linear infinite;
|
||||
}
|
||||
@keyframes sword1 {
|
||||
0% {
|
||||
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes sword2 {
|
||||
0% {
|
||||
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sword3 {
|
||||
0% {
|
||||
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="loader">
|
||||
<view class="loader__ball"></view>
|
||||
<view class="loader__ball"></view>
|
||||
<view class="loader__ball"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "loading-triangle",
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$dotColor: linear-gradient(135deg, #1FA2FF, #12D8FA, #29ffc6);
|
||||
$dotSize: 30rpx;
|
||||
$duration: 2s;
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.loader {
|
||||
animation: rotate $duration linear infinite normal;
|
||||
position: relative;
|
||||
transform-origin: 50% 50%;
|
||||
|
||||
&__ball {
|
||||
height: $dotSize;
|
||||
width: $dotSize;
|
||||
left: -$dotSize * 0.5;
|
||||
position: absolute;
|
||||
top: -$dotSize * 0.5;
|
||||
transform-origin: 50% 50%;
|
||||
|
||||
&:nth-of-type(2) {
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
transform: rotate(240deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation: move $duration * 0.5 ease-in-out infinite alternate;
|
||||
background: $dotColor;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
|
||||
0%,
|
||||
15% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-150%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<!-- -->
|
||||
<view :style="{'position': position,'z-index':zIndex,'--opacity':maskOpacity}" class="container" :class="[mask?'mask':'',maskMini?'mask-mini':'',maskDark?'mask-dark':'']" @click.prevent="handleClick">
|
||||
<view>
|
||||
<view class="main">
|
||||
<loading0 v-if="type=='circle'"></loading0>
|
||||
<loading1 v-if="type=='pulse'"></loading1>
|
||||
<loading2 v-if="type=='bounce'"></loading2>
|
||||
<loading3 v-if="type=='eyes'"></loading3>
|
||||
<loading4 v-if="type=='triangle'"></loading4>
|
||||
<loading5 v-if="type=='sun'"></loading5>
|
||||
<loading6 v-if="type=='love'"></loading6>
|
||||
<loading7 v-if="type=='sword'"></loading7>
|
||||
<loading8 v-if="type=='atom'"></loading8>
|
||||
<loading9 v-if="type=='gear'"></loading9>
|
||||
<loading10 v-if="type=='radar'"></loading10>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loading0 from "./static/loading-circle.vue"
|
||||
import loading1 from "./static/loading-pulse.vue"
|
||||
import loading2 from "./static/loading-bounce.vue"
|
||||
import loading3 from "./static/loading-eyes.vue"
|
||||
import loading4 from "./static/loading-triangle.vue"
|
||||
import loading5 from "./static/loading-sun.vue"
|
||||
import loading6 from "./static/loading-love.vue"
|
||||
import loading7 from "./static/loading-sword.vue"
|
||||
import loading8 from "./static/loading-atom.vue"
|
||||
import loading9 from "./static/loading-gear.vue"
|
||||
import loading10 from "./static/loading-radar.vue"
|
||||
|
||||
export default {
|
||||
name: "zero-loading",
|
||||
components: {
|
||||
loading0,
|
||||
loading1,
|
||||
loading2,
|
||||
loading3,
|
||||
loading4,
|
||||
loading5,
|
||||
loading6,
|
||||
loading7,
|
||||
loading8,
|
||||
loading9,
|
||||
loading10
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: "atom"
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: "fixed"
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 9,
|
||||
},
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
maskOpacity:{
|
||||
type: Number,
|
||||
default: 0.3,
|
||||
},
|
||||
maskMini: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
maskDark:{
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('click')
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.mask {
|
||||
z-index: 999 !important;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: rgba(255, 255, 255, var(--opacity));
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
.mask-mini{
|
||||
height: 300rpx;
|
||||
width: 300rpx;
|
||||
border-radius: 20rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.mask-dark{
|
||||
background: rgba(7, 17, 27 , var(--opacity));
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user