1.loader,
2.loader-in {
3  display: flex;
4  align-items: center;
5  justify-content: center;
6}
7
8.loader {
9  position: relative;
10  border-radius: 50%;
11  width: 80px;
12  height: 80px;
13  background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.001) 0%, rgba(0, 0, 0, 0.4) 50%);
14  box-shadow: 0 0 60px 0px rgba(0, 0, 0, 0.3);
15  animation: circle41 1.2s infinite alternate;
16}
17
18.loader-in {
19  width: 78%;
20  height: 78%;
21  border-radius: 50%;
22  animation: circle 1.2s infinite alternate;
23  animation-delay: calc(1.2s / 4);
24}
25
26.loader-in::after {
27  content: '';
28  width: 100%;
29  height: 100%;
30  background: linear-gradient(to bottom right, #6E2E8E 0%, #0B9FBD 100%);
31  border-radius: 50%;
32  animation: rot122 2.4s infinite linear;
33}
34
35.loader-dot {
36  display: flex;
37  justify-content: center;
38  align-items: center;
39  position: absolute;
40  top: 50%;
41  left: 50%;
42  width: 55%;
43  height: 55%;
44  transform: translate(-50%, -50%);
45  border-radius: 50%;
46  background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.001) 0%, rgba(0, 0, 0, 0.4) 50%);
47  background-size: 120%;
48  background-position: center;
49}
50
51.loader-dot::after {
52  content: '';
53  width: 40%;
54  height: 40%;
55  border-radius: 50%;
56  background-color: rgba(255, 255, 255, 0.8);
57  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
58  animation: circle41 1.2s infinite alternate;
59  animation-delay: calc(1.2s / 4);
60}
61
62@keyframes rot122 {
63  0% {
64    transform: rotate(0deg);
65  }
66
67  100% {
68    transform: rotate(360deg);
69  }
70}
71
72@keyframes circle41 {
73  0% {
74    transform: scale(1);
75  }
76
77  100% {
78    transform: scale(1.1);
79  }
80}