Loader by Zadrus

1.container {
2  width: 200px;
3  height: 200px;
4  display: flex;
5  justify-content: center;
6  align-items: center;
7  border-radius: 50%;
8}
9
10.loader {
11  width: 20px;
12  height: 40px;
13  border-radius: 10px 50px;
14  box-shadow: 0px 0px 5px black;
15  animation: dominos 1s ease infinite;
16}
17
18.loader:nth-child(1) {
19  --left: 80px;
20  animation-delay: 0.325s;
21  background-color: #5d9960;
22}
23
24.loader:nth-child(2) {
25  --left: 70px;
26  animation-delay: 0.5s;
27  background-color: #82a587;
28}
29
30.loader:nth-child(3) {
31  left: 60px;
32  animation-delay: 0.625s;
33  background-color: #8bac74;
34}
35
36.loader:nth-child(4) {
37  animation-delay: 0.74s;
38  left: 50px;
39  background-color: #b9bf90;
40}
41
42.loader:nth-child(5) {
43  animation-delay: 0.865s;
44  left: 40px;
45  background-color: #e7d2ab;
46}
47
48@keyframes dominos {
49  50% {
50    opacity: 0.7;
51  }
52
53  75% {
54    -webkit-transform: rotate(90deg);
55    transform: rotate(90deg);
56  }
57
58  80% {
59    opacity: 1;
60  }
61}
62