YiAi/admin/public/loading.css
2024-01-27 19:53:17 +08:00

91 lines
1.6 KiB
CSS

#app {
height: 100%;
}
.fantastic-admin-home {
position: absolute;
z-index: 10000;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
user-select: none;
color: #736477;
background-image: linear-gradient(
45deg,
rgb(51, 138, 249),
rgb(47, 248, 255)
);
}
.fantastic-admin-home .loading {
--r1: 154%;
--r2: 68.5%;
width: 60px;
height: 60px;
border-radius: 50%;
background: radial-gradient(
var(--r1) var(--r2) at top,
#0000 79.5%,
#85f7fb 80%
)
center left,
radial-gradient(var(--r1) var(--r2) at bottom, #85f7fb 79.5%, #0000 80%)
center center,
radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #85f7fb 80%) center
right,
#d0f4ff;
background-size: 50.5% 220%;
background-position: -100% 0%, 0% 0%, 100% 0%;
background-repeat: no-repeat;
animation: p9 2s infinite linear;
}
@keyframes p9 {
33% {
background-position: 0% 33%, 100% 33%, 200% 33%;
}
66% {
background-position: -100% 66%, 0% 66%, 100% 66%;
}
100% {
background-position: 0% 100%, 100% 100%, 200% 100%;
}
}
@keyframes square-to-dot-animation {
15%,
25% {
border-radius: 100%;
width: 0;
height: 0;
margin: 5px;
border-width: 5px;
}
40% {
border-radius: 15%;
width: 10px;
height: 10px;
margin: initial;
border-width: 3px;
}
}
.fantastic-admin-home .text {
position: relative;
font-size: 24px;
margin-top: 20px;
}
.fantastic-admin-home .text::after {
content: "…";
position: absolute;
padding-left: 5px;
}