1.loader-3 {
2  width: 10em;
3  display: flex;
4  justify-content: space-evenly;
5}
6
7.circle {
8  width: 1em;
9  height: 1em;
10  border-radius: 50%;
11  position: relative;
12}
13
14.circle:nth-child(1) {
15  background-color: #90be6d;
16}
17
18.circle:nth-child(2) {
19  background-color: #f9c74f;
20}
21
22.circle:nth-child(3) {
23  background-color: #f8961e;
24}
25
26.circle:nth-child(4) {
27  background-color: #f3722c;
28}
29
30.circle:nth-child(5) {
31  background-color: #f94346;
32}
33
34.circle::before {
35  content: "";
36  width: 100%;
37  height: 100%;
38  position: absolute;
39  border-radius: 50%;
40  opacity: 0.5;
41  animation: animateLoader38 2s ease-out infinite;
42}
43
44.circle:nth-child(1)::before {
45  background-color: #90be6d;
46}
47
48.circle:nth-child(2)::before {
49  background-color: #f9c74f;
50  animation-delay: 0.2s;
51}
52
53.circle:nth-child(3)::before {
54  background-color: #f8961e;
55  animation-delay: 0.4s;
56}
57
58.circle:nth-child(4)::before {
59  background-color: #f3722c;
60  animation-delay: 0.6s;
61}
62
63.circle:nth-child(5)::before {
64  background-color: #f94346;
65  animation-delay: 0.8s;
66}
67
68@keyframes animateLoader38 {
69  0% {
70    transform: scale(1);
71  }
72
73  50%,
74  75% {
75    transform: scale(2.5);
76  }
77
78  80%,
79  100% {
80    opacity: 0;
81  }
82}