apps/x_admin
1
0
Fork 0
mirror of https://gitee.com/xiangheng/x_admin.git synced 2025-12-24 08:12:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Loading

Browse Source
This commit is contained in:
xh
2025-11-18 01:06:26 +08:00
parent 5bc7d9dffd
commit e137cdfb73
3 changed files with 160 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
admin/index.html
View File

@@ -26,18 +26,49 @@
// xErr.SetUid(2) //设置用户ID
</script>
<link rel="stylesheet" href="/src/styles/loading.css" />
<link rel="stylesheet" href="/src/styles/loading.scss" />
</head>
<body>
<div id="app">
<div class="x-loading">
<div class="loading-center">
<div class="loading-center-absolute">
<div class="object object_four"></div>
<div class="object object_three"></div>
<div class="object object_two"></div>
<div class="object object_one"></div>
</div>
<div class="circle">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="Loading">Loading...</div>
</div>
</div>
</div>

88
admin/src/styles/loading.css
View File

@@ -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);
}
}

121
admin/src/styles/loading.scss Normal file
View File

@@ -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);
}
}
}