You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
1.7 KiB
85 lines
1.7 KiB
.sk-center-wrapper {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.sk-chase {
|
|
position: relative;
|
|
animation: sk-chase 2.5s infinite linear both;
|
|
}
|
|
.sk-chase.green > .sk-chase-dot:before {
|
|
background-color: #1e90ff;
|
|
}
|
|
.sk-chase > .sk-chase-dot {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
animation: sk-chase-dot 2s infinite ease-in-out both;
|
|
}
|
|
.sk-chase > .sk-chase-dot:before {
|
|
content: "";
|
|
display: block;
|
|
width: 25%;
|
|
height: 25%;
|
|
border-radius: 100%;
|
|
animation: sk-chase-dot-before 2s infinite ease-in-out both;
|
|
background-color: #fff;
|
|
}
|
|
.sk-chase > .sk-chase-dot:nth-child(1) {
|
|
animation-delay: -1.1s;
|
|
}
|
|
.sk-chase > .sk-chase-dot:nth-child(2) {
|
|
animation-delay: -1s;
|
|
}
|
|
.sk-chase > .sk-chase-dot:nth-child(3) {
|
|
animation-delay: -0.9s;
|
|
}
|
|
.sk-chase > .sk-chase-dot:nth-child(4) {
|
|
animation-delay: -0.8s;
|
|
}
|
|
.sk-chase > .sk-chase-dot:nth-child(5) {
|
|
animation-delay: -0.7s;
|
|
}
|
|
.sk-chase > .sk-chase-dot:nth-child(6) {
|
|
animation-delay: -0.6s;
|
|
}
|
|
.sk-chase > .sk-chase-dot:nth-child(1):before {
|
|
animation-delay: -1.1s;
|
|
}
|
|
.sk-chase > .sk-chase-dot:nth-child(2):before {
|
|
animation-delay: -1s;
|
|
}
|
|
.sk-chase > .sk-chase-dot:nth-child(3):before {
|
|
animation-delay: -0.9s;
|
|
}
|
|
.sk-chase > .sk-chase-dot:nth-child(4):before {
|
|
animation-delay: -0.8s;
|
|
}
|
|
.sk-chase > .sk-chase-dot:nth-child(5):before {
|
|
animation-delay: -0.7s;
|
|
}
|
|
.sk-chase > .sk-chase-dot:nth-child(6):before {
|
|
animation-delay: -0.6s;
|
|
}
|
|
@keyframes sk-chase {
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes sk-chase-dot {
|
|
80%,
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes sk-chase-dot-before {
|
|
50% {
|
|
transform: scale(0.4);
|
|
}
|
|
100%,
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
}
|