1.loader-container {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  height: 100%
6}
7
8.loader {
9  width: 80px;
10  height: 80px;
11  position: relative;
12}
13
14.loader .circle {
15  position: absolute;
16  width: 20px;
17  height: 20px;
18  border-radius: 50%;
19  animation: pulse 1.2s infinite ease-in-out;
20}
21
22.loader .circle:nth-child(1) {
23  top: 0;
24  left: 30px;
25  background-color: #4158D0;
26  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
27  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
28}
29
30.loader .circle:nth-child(2) {
31  top: 30px;
32  left: 60px;
33  background-color: #0093E9;
34  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
35  animation-delay: 0.4s;
36  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
37}
38
39.loader .circle:nth-child(3) {
40  top: 60px;
41  left: 30px;
42  background-color: #00DBDE;
43  background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
44  animation-delay: 0.8s;
45  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
46}
47
48.loader .circle:nth-child(4) {
49  top: 30px;
50  left: 0;
51  background-color: #3EECAC;
52  background-image: linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%);
53  animation-delay: 1.2s;
54  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
55}
56
57@keyframes pulse {
58  0% {
59    transform: scale(1);
60  }
61
62  50% {
63    transform: scale(0.2);
64    opacity: 0.5;
65  }
66
67  100% {
68    transform: scale(1);
69  }
70}