Loader by Ratinax

1.loader {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  position: relative;
6  cursor: not-allowed;
7  scale: 0.7;
8}
9
10.central {
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  position: relative;
15  width: 10em;
16  height: 10em;
17  border-radius: 50%;
18  box-shadow: 0.5em 1em 1em red,
19    -0.5em 0.5em 1em lime,
20    0.5em -0.5em 1em purple,
21    -0.5em -0.5em 1em yellow;
22}
23
24.external-shadow {
25  width: 10em;
26  height: 10em;
27  border-radius: 50%;
28  display: flex;
29  justify-content: center;
30  align-items: center;
31  position: relative;
32  box-shadow: 0.5em 0.5em 3em red,
33    -0.5em 0.5em 3em lime,
34    0.5em -0.5em 3em purple,
35    -0.5em -0.5em 3em yellow;
36  z-index: 999;
37  animation: rotate 3s linear infinite;
38  background-color: #212121;
39}
40
41.intern {
42  position: absolute;
43  color: white;
44  z-index: 9999;
45}
46
47.intern::before {
48  content: "100%";
49  animation: percent 2s ease-in-out infinite;
50}
51
52@keyframes rotate {
53  0% {
54    transform: rotate(0deg);
55  }
56
57  50% {
58    transform: rotate(180deg);
59  }
60
61  100% {
62    transform: rotate(360deg);
63  }
64}
65
66@keyframes percent {
67  0% {
68    content: '0%';
69  }
70
71  25% {
72    content: '25%';
73  }
74
75  33% {
76    content: '33%';
77  }
78
79  42% {
80    content: '42%';
81  }
82
83  51% {
84    content: '51%';
85  }
86
87  67% {
88    content: '67%';
89  }
90
91  74% {
92    content: '74%';
93  }
94
95  75% {
96    content: '75%';
97  }
98
99  86% {
100    content: '86%';
101  }
102
103  95% {
104    content: '95%';
105  }
106
107  98% {
108    content: '98%';
109  }
110
111  99% {
112    content: '99%';
113  }
114}