91 lines
No EOL
1.2 KiB
CSS
91 lines
No EOL
1.2 KiB
CSS
.dots {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.dots span:nth-child(1) {
|
|
animation-delay: 0.05s;
|
|
}
|
|
|
|
.dots span:nth-child(1):after {
|
|
left: -20px;
|
|
}
|
|
|
|
.dots span:nth-child(2) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.dots span:nth-child(2):after {
|
|
left: -40px;
|
|
}
|
|
|
|
.dots span:nth-child(3) {
|
|
animation-delay: 0.15s;
|
|
}
|
|
|
|
.dots span:nth-child(3):after {
|
|
left: -60px;
|
|
}
|
|
|
|
.dots span:nth-child(4) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.dots span:nth-child(4):after {
|
|
left: -80px;
|
|
}
|
|
|
|
.dots span:nth-child(5) {
|
|
animation-delay: 0.25s;
|
|
}
|
|
|
|
.dots span:nth-child(5):after {
|
|
left: -100px;
|
|
}
|
|
|
|
.dots span {
|
|
display: inline-block;
|
|
position: absolute;
|
|
animation-duration: 4s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.dots span:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: inline-block;
|
|
background-color: #f0f0f0;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.dots.animate span {
|
|
animation-name: dots;
|
|
}
|
|
|
|
@keyframes dots {
|
|
0%,20% {
|
|
left: 0;
|
|
animation-timing-function: ease-out;
|
|
opacity: 0;
|
|
}
|
|
25% {
|
|
opacity: 1;
|
|
}
|
|
35% {
|
|
left: 45%;
|
|
animation-timing-function: linear;
|
|
}
|
|
65% {
|
|
left: 55%;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
75% {
|
|
opacity: 1;
|
|
}
|
|
80%,100% {
|
|
left: 100%;
|
|
opacity: 0;
|
|
}
|
|
} |