1.spinner {
2 position: relative;
3 width: 16px;
4 height: 16px;
5}
6
7.spinner div {
8 width: 100%;
9 height: 100%;
10 background-color: #004dff;
11 border-radius: 50%;
12 animation: spinner-4t3wzl 1.25s infinite backwards;
13}
14
15.spinner div:nth-child(1) {
16 animation-delay: 0.15s;
17 background-color: rgba(0,77,255,0.9);
18}
19
20.spinner div:nth-child(2) {
21 animation-delay: 0.3s;
22 background-color: rgba(0,77,255,0.8);
23}
24
25.spinner div:nth-child(3) {
26 animation-delay: 0.45s;
27 background-color: rgba(0,77,255,0.7);
28}
29
30.spinner div:nth-child(4) {
31 animation-delay: 0.6s;
32 background-color: rgba(0,77,255,0.6);
33}
34
35.spinner div:nth-child(5) {
36 animation-delay: 0.75s;
37 background-color: rgba(0,77,255,0.5);
38}
39
40@keyframes spinner-4t3wzl {
41 0% {
42  transform: rotate(0deg) translateY(-200%);
43 }
44
45 60%, 100% {
46  transform: rotate(360deg) translateY(-200%);
47 }
48}