1.loader {
2  --size-loader: 50px;
3  --size-orbe: 10px;
4  width: var(--size-loader);
5  height: var(--size-loader);
6  position: relative;
7  transform: rotate(45deg);
8}
9
10.orbe {
11  position: absolute;
12  width: 100%;
13  height: 100%;
14  --delay: calc(var(--index) * 0.1s);
15  animation: orbit7456 ease-in-out 1.5s var(--delay) infinite;
16  opacity: calc(1 - calc(0.2 * var(--index)));
17}
18
19.orbe::after {
20  position: absolute;
21  content: '';
22  top: 0;
23  left: 0;
24  width: var(--size-orbe);
25  height: var(--size-orbe);
26  background-color: #3ae374;
27  box-shadow: 0px 0px 20px 2px #3ae374;
28  border-radius: 50%;
29}
30
31@keyframes orbit7456 {
32  0% {
33  }
34
35  80% {
36    transform: rotate(360deg);
37  }
38
39  100% {
40    transform: rotate(360deg);
41  }
42}