Loader by MiniJohan

1.loader {
2  display: flex;
3  max-width: 350;
4  position: relative;
5  gap: 20px;
6  justify-content: space-evenly;
7  animation: rotate 3s linear infinite;
8  color: white;
9}
10
11.loading {
12}
13
14.orb {
15  width: 25px;
16  height: 25px;
17  background-color: rgb(255, 255, 255);
18  border-radius: 50%;
19  position: absolute;
20}
21
22.orb:nth-child(1) {
23  top: 20px;
24  left: 20px;
25  animation: bounce2 1.5s ease 1s infinite;
26}
27
28.orb:nth-child(2) {
29  top: 20px;
30  right: 20px;
31  animation: bounce2 1.5s ease 1s infinite;
32}
33
34.orb:nth-child(3) {
35  bottom: 20px;
36  left: 20px;
37  animation: bounce2 1.5s ease 1s infinite;
38}
39
40.orb:nth-child(4) {
41  bottom: 20px;
42  right: 20px;
43  animation: bounce2 1.5s ease 1s infinite;
44}
45
46.orb:nth-child(5) {
47  top: 20px;
48  animation: bounce2 1.5s ease 1s infinite;
49}
50
51.orb:nth-child(6) {
52  bottom: 20px;
53  animation: bounce2 1.5s ease 1s infinite;
54}
55
56.orb:nth-child(7) {
57  left: 20px;
58  top: -12.5px;
59  animation: bounce2 1.5s ease 1s infinite;
60}
61
62.orb:nth-child(8) {
63  right: 20px;
64  top: -12.5px;
65  animation: bounce2 1.5s ease 1s infinite;
66}
67
68.orb:nth-child(9) {
69  top: -12.5px;
70  animation: bounce 1.5s ease 1.5s infinite;
71}
72
73@keyframes rotate {
74  0% {
75    transform: rotate(0);
76  }
77
78  25% {
79    transform: rotate(90deg);
80  }
81
82  50% {
83    transform: rotate(180deg);
84  }
85
86  100% {
87    transform: rotate(360deg);
88  }
89}
90
91@keyframes bounce {
92  0% {
93    transform: scale(1);
94  }
95
96  50% {
97    transform: scale(0.5);
98  }
99}
100
101@keyframes bounce2 {
102  0% {
103    transform: scale(1);
104  }
105
106  50% {
107    transform: scale(0.5);
108  }
109}
110