117 lines
2.0 KiB
SCSS
117 lines
2.0 KiB
SCSS
.Loading{
|
|
|
|
.wrapper {
|
|
width: 200px;
|
|
height: 60px;
|
|
position: relative;
|
|
left: 40%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.circle {
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background-color: var(--fifthly);
|
|
left: 15%;
|
|
transform-origin: 50%;
|
|
animation: circle7124 .5s alternate infinite ease;
|
|
}
|
|
|
|
@keyframes circle7124 {
|
|
0% {
|
|
top: 60px;
|
|
height: 5px;
|
|
border-radius: 50px 50px 25px 25px;
|
|
transform: scaleX(1.7);
|
|
}
|
|
|
|
40% {
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
100% {
|
|
top: 0%;
|
|
}
|
|
}
|
|
|
|
.circle:nth-child(2) {
|
|
left: 45%;
|
|
animation-delay: .2s;
|
|
}
|
|
|
|
.circle:nth-child(3) {
|
|
left: auto;
|
|
right: 15%;
|
|
animation-delay: .3s;
|
|
}
|
|
|
|
.shadow {
|
|
width: 20px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background-color: var(--fifthly);
|
|
position: absolute;
|
|
opacity: .5;
|
|
top: 62px;
|
|
transform-origin: 50%;
|
|
z-index: -1;
|
|
left: 15%;
|
|
filter: blur(1px);
|
|
animation: shadow046 .5s alternate infinite ease;
|
|
}
|
|
|
|
@keyframes shadow046 {
|
|
0% {
|
|
transform: scaleX(1.5);
|
|
}
|
|
|
|
40% {
|
|
transform: scaleX(1);
|
|
opacity: .7;
|
|
}
|
|
|
|
100% {
|
|
transform: scaleX(.2);
|
|
opacity: .4;
|
|
}
|
|
}
|
|
|
|
.shadow:nth-child(4) {
|
|
left: 45%;
|
|
animation-delay: .2s
|
|
}
|
|
|
|
.shadow:nth-child(5) {
|
|
left: auto;
|
|
right: 15%;
|
|
animation-delay: .3s;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.loading_page{
|
|
width: 100vw !important;height: 50vh !important;
|
|
display: flex !important;justify-content: space-between !important;align-items: center !important; flex-direction: column;
|
|
}
|
|
|
|
|
|
:where(.css-dev-only-do-not-override-1ae8k9u).ant-spin .ant-spin-dot-item ,:where(.css-1adbn6x).ant-spin .ant-spin-dot-item{
|
|
background-color: var(--primary);
|
|
}
|
|
:where(.css-dev-only-do-not-override-1ae8k9u).ant-spin, :where(.css-1adbn6x).ant-spin .ant-spin-dot-item{
|
|
color: var(--primary);
|
|
}
|
|
|
|
|
|
.spinner{
|
|
color: var(--primary);
|
|
padding-block: 30px;
|
|
} |