-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading...
diff --git a/admin/src/styles/loading.css b/admin/src/styles/loading.css
deleted file mode 100644
index 69219da..0000000
--- a/admin/src/styles/loading.css
+++ /dev/null
@@ -1,88 +0,0 @@
-.x-loading {
- background-color: #6676fe;
-
- position: fixed;
- height: 100%;
- width: 100%;
- z-index: 1;
- margin-top: 0px;
- top: 0px;
-}
-.x-loading .loading-center {
- width: 100%;
- height: 100%;
- position: relative;
-}
-.x-loading .loading-center-absolute {
- position: absolute;
- left: 50%;
- top: 50%;
- height: 200px;
- width: 200px;
- margin-top: -100px;
- margin-left: -100px;
- -ms-transform: rotate(-135deg);
- -webkit-transform: rotate(-135deg);
- transform: rotate(-135deg);
-}
-.x-loading .object {
- -moz-border-radius: 50% 50% 50% 50%;
- -webkit-border-radius: 50% 50% 50% 50%;
- border-radius: 50% 50% 50% 50%;
- position: absolute;
- border-top: 5px solid #fff;
- border-bottom: 5px solid transparent;
- border-left: 5px solid #fff;
- border-right: 5px solid transparent;
-
- -webkit-animation: x-loading-animate 2s infinite;
- animation: x-loading-animate 2s infinite;
-}
-.x-loading .object_one {
- left: 75px;
- top: 75px;
- width: 50px;
- height: 50px;
-}
-
-.x-loading .object_two {
- left: 65px;
- top: 65px;
- width: 70px;
- height: 70px;
- -webkit-animation-delay: 0.2s;
- animation-delay: 0.2s;
-}
-
-.x-loading .object_three {
- left: 55px;
- top: 55px;
- width: 90px;
- height: 90px;
- -webkit-animation-delay: 0.4s;
- animation-delay: 0.4s;
-}
-.x-loading .object_four {
- left: 45px;
- top: 45px;
- width: 110px;
- height: 110px;
- -webkit-animation-delay: 0.6s;
- animation-delay: 0.6s;
-}
-
-@-webkit-keyframes x-loading-animate {
- 50% {
- -ms-transform: rotate(360deg) scale(0.8);
- -webkit-transform: rotate(360deg) scale(0.8);
- transform: rotate(360deg) scale(0.8);
- }
-}
-
-@keyframes x-loading-animate {
- 50% {
- -ms-transform: rotate(360deg) scale(0.8);
- -webkit-transform: rotate(360deg) scale(0.8);
- transform: rotate(360deg) scale(0.8);
- }
-}
diff --git a/admin/src/styles/loading.scss b/admin/src/styles/loading.scss
new file mode 100644
index 0000000..db7440e
--- /dev/null
+++ b/admin/src/styles/loading.scss
@@ -0,0 +1,121 @@
+// 大球尺寸
+$loading-size: 400px;
+// 小球尺寸
+$dot-size: 14px;
+// 小球旋转角度
+$n: 36;
+$dot-rotate: calc(360deg / $n);
+
+$loading-duration: 2s;
+.x-loading {
+ height: 100vh;
+ background: radial-gradient(circle at center, rgb(163, 158, 243), rgb(140, 132, 248));
+}
+@keyframes txtFlash {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.5;
+ }
+}
+.circle {
+ position: relative;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: $loading-size;
+ height: $loading-size;
+ border-radius: 50%;
+
+ .Loading {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 24px;
+ color: #fff;
+ letter-spacing: 2px;
+ animation: txtFlash $loading-duration linear infinite;
+ }
+ .dot {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-left: calc(-1 * $dot-size / 2);
+ margin-top: calc(-1 * $dot-size / 2);
+ width: $dot-size;
+ height: $dot-size;
+
+ // border-radius: 50%;
+ transform-style: preserve-3d;
+ }
+ @for $i from 1 through $n {
+ .dot:nth-child(#{$i}) {
+ transform: rotate($dot-rotate * $i) translateY(calc($loading-size / 2));
+
+ &::after,
+ &::before {
+ animation-delay: calc(-1 * $loading-duration / $n * $i * 6);
+ }
+ }
+ }
+ .dot::after,
+ .dot::before {
+ content: '';
+ position: absolute;
+ width: $dot-size;
+ height: $dot-size;
+ border-radius: 50%;
+ }
+ .dot::after {
+ top: -100%;
+
+ background-color: white;
+
+ animation: whiteLoading 2s linear infinite;
+ }
+ .dot::before {
+ top: 100%;
+
+ background-color: black;
+
+ animation: blackLoading 2s linear infinite;
+ }
+ @keyframes blackLoading {
+ 0% {
+ animation-timing-function: linear;
+ transform: translate3d(0, 0, calc($dot-size / 2)) scale(1);
+ }
+ 25% {
+ transform: translate3d(0, -100%, $dot-size) scale(1.2);
+ }
+ 50% {
+ transform: translate3d(0, -200%, calc($dot-size / 2)) scale(1);
+ }
+ 75% {
+ transform: translate3d(0, -100%, 0) scale(0.8);
+ }
+ 100% {
+ transform: translate3d(0, 0, calc($dot-size / 2)) scale(1);
+ }
+ }
+ @keyframes whiteLoading {
+ 0% {
+ animation-timing-function: linear;
+ transform: translate3d(0, 0, calc($dot-size / 2)) scale(1);
+ }
+ 25% {
+ transform: translate3d(0, 100%, 0) scale(0.8);
+ }
+ 50% {
+ transform: translate3d(0, 200%, calc($dot-size / 2)) scale(1);
+ }
+ 75% {
+ transform: translate3d(0, 100%, $dot-size) scale(1.2);
+ }
+ 100% {
+ transform: translate3d(0, 0, calc($dot-size / 2)) scale(1);
+ }
+ }
+}