1.loader {
2  background-color: black;
3  position: relative;
4  width: 2.5em;
5  height: 2.5em;
6  transform-origin: center;
7  transition: 1s;
8  border-radius: 50px;
9  box-shadow: inset 0px 0px 10px purple,
10  inset 5px 5px 12px rgba(44, 0, 114, 0.8),
11  inset 8px 8px 1px rgba(160, 120, 255, 0.7),
12  0px 0px 1px rgba(160, 120, 255, 0.6);
13  animation: 1.2s linear infinite 0s running first682;
14}
15
16.loader div {
17  width: inherit;
18  height: inherit;
19  position: absolute;
20}
21
22#first {
23  transform: rotate(90deg)
24}
25
26#first::before {
27  --width: 1em;
28  --height: 1em;
29  content: "";
30  position: absolute;
31  top: 100%;
32  left: calc(50% - var(--width)/2);
33  width: 1em;
34  height: 1em;
35  background-color: rgb(44, 0, 114);
36  box-shadow: inset 5px 5px 10px rgb(160, 120, 255),
37  0px 0px 2px white;
38  border-radius: 50px;
39  animation: 0.8s ease-in 0s infinite running jump2;
40}
41
42#second {
43  transform: rotate(90deg);
44}
45
46#second::before {
47  --width: 1em;
48  --height: 1em;
49  content: "";
50  position: absolute;
51  top: 100%;
52  left: calc(50% - var(--width)/2);
53  width: 1em;
54  height: 1em;
55  background-color: rgb(44, 0, 114);
56  box-shadow: inset 5px 5px 10px rgb(160, 120, 255),
57  0px 0px 2px white;
58  border-radius: 50px;
59  animation: 1.5s ease-in 0s infinite running jump2;
60}
61
62#third {
63  transform: rotate(90deg)
64}
65
66#third::before {
67  --width: 1em;
68  --height: 1em;
69  content: "";
70  position: absolute;
71  top: 100%;
72  left: calc(50% - var(--width)/2);
73  width: 1em;
74  height: 1em;
75  background-color: rgb(44, 0, 114);
76  box-shadow: inset 5px 5px 10px rgb(160, 120, 255),
77  0px 0px 2px white;
78  border-radius: 50px;
79  animation: 1.6s ease-in 0s infinite running jump2;
80}
81
82.loader::after {
83  --width: 1em;
84  --height: 1em;
85  content: "";
86  position: absolute;
87  top: 100%;
88  left: calc(50% - var(--width)/2);
89  width: 1em;
90  height: 1em;
91  background-color: rgb(44, 0, 114);
92  box-shadow: inset 5px 5px 10px rgb(160, 120, 255),
93  0px 0px 2px white;
94  border-radius: 50px;
95  animation: 1.2s ease-in 1s alternate infinite running jump2;
96}
97
98@keyframes first682 {
99  0% {
100    transform: rotate(0deg);
101  }
102
103  25% {
104    transform: rotate(0deg);
105    transform: rotate(90deg)
106  }
107
108  50% {
109    transform: rotate(90deg);
110    transform: rotate(180deg);
111  }
112
113  75% {
114    transform: rotate(180deg);
115    transform: rotate(270deg)
116  }
117
118  100% {
119    transform: rotate(270deg);
120    transform: rotate(360deg);
121  }
122}
123
124@keyframes jump2 {
125  0% {
126    top: 100%;
127  }
128
129  25% {
130    top: 230%
131  }
132
133  50% {
134    top: 100%;
135  }
136
137  75% {
138    height: 0.6em
139  }
140
141  100% {
142    height: 1em
143  }
144}