1.loader {
2  width: 6em;
3  height: 6em;
4  font-size: 10px;
5  position: relative;
6  display: flex;
7  align-items: center;
8  justify-content: center;
9}
10
11.loader .face {
12  position: absolute;
13  border-radius: 50%;
14  border-style: solid;
15  animation: animate023845 3s linear infinite;
16}
17
18.loader .face:nth-child(1) {
19  width: 100%;
20  height: 100%;
21  color: gold;
22  border-color: currentColor transparent transparent currentColor;
23  border-width: 0.2em 0.2em 0em 0em;
24  --deg: -45deg;
25  animation-direction: normal;
26}
27
28.loader .face:nth-child(2) {
29  width: 70%;
30  height: 70%;
31  color: lime;
32  border-color: currentColor currentColor transparent transparent;
33  border-width: 0.2em 0em 0em 0.2em;
34  --deg: -135deg;
35  animation-direction: reverse;
36}
37
38.loader .face .circle {
39  position: absolute;
40  width: 50%;
41  height: 0.1em;
42  top: 50%;
43  left: 50%;
44  background-color: transparent;
45  transform: rotate(var(--deg));
46  transform-origin: left;
47}
48
49.loader .face .circle::before {
50  position: absolute;
51  top: -0.5em;
52  right: -0.5em;
53  content: '';
54  width: 1em;
55  height: 1em;
56  background-color: currentColor;
57  border-radius: 50%;
58  box-shadow: 0 0 2em,
59                0 0 4em,
60                0 0 6em,
61                0 0 8em,
62                0 0 10em,
63                0 0 0 0.5em rgba(255, 255, 0, 0.1);
64}
65
66@keyframes animate023845 {
67  to {
68    transform: rotate(1turn);
69  }
70}