Loader by zebra76966

1.loader {
2  border-top: 8px solid hotpink;
3  border-bottom: 8px solid #f55951;
4  border-left: 8px solid #3a9efd;
5  border-right: 8px solid #1fff7c;
6  border-radius: 100%;
7  height: 100px;
8  width: 100px;
9  animation: looper 5s infinite ease-in-out;
10}
11
12@keyframes looper {
13  0% {
14    border-radius: 100% 100% 100% 100%;
15    border-color: hotpink #3a9efd #1fff7c #f55951;
16  }
17
18  10% {
19    border-radius: 0% 100% 0% 0%;
20    border-color: #f55951;
21    transform: rotate(150deg);
22  }
23
24  20% {
25    border-radius: 0% 0% 0% 0%;
26    border-color: #3a9efd;
27  }
28
29  30% {
30    border-radius: 0% 0% 0% 0%;
31    border-color: #1fff7c;
32  }
33
34  40% {
35    border-radius: 0% 0% 0% 0%;
36    border-color: #3a9efd;
37  }
38
39  50% {
40    border-radius: 100%;
41    border-color: #f55951;
42  }
43
44  90% {
45    border-radius: 100%;
46    transform: rotate(360deg);
47    border-style: dashed;
48  }
49
50  100% {
51    transform: rotate(0deg);
52    border-radius: 100% 100% 100% 100%;
53    border-color: hotpink #3a9efd #1fff7c #f55951;
54  }
55}
56
57
58
59
60