Loader by Ratinax

1.sun {
2  position: relative;
3  animation: rotate 4s linear infinite;
4  --color: yellow;
5  --scale: 0.4;
6}
7
8.center {
9  height: calc(var(--scale) * 10em);
10  width: calc(var(--scale) * 10em);
11  transition: background-color 2s linear, box-shadow 2s linear;
12  background-color: var(--color);
13  border-radius: 50%;
14  box-shadow: 0 0 calc(var(--scale) * 3em) var(--color);
15}
16
17.ray {
18  position: absolute;
19  height: calc(var(--scale) * 3em);
20  width: calc(var(--scale) * 0.5em);
21  transition: background-color 2s ease-in-out, box-shadow 2s ease-in-out;
22  box-shadow: 0 0 calc(var(--scale) * 1em) var(--color);
23  background-color: var(--color);
24}
25
26.r-1 {
27  margin-left: calc(var(--scale) * 4.75em);
28  margin-top: calc(var(--scale) * 1em);
29}
30
31.r-2 {
32  margin-left: calc(var(--scale) * 12.25em);
33  margin-top: calc(var(--scale) * -6.25em);
34  transform: rotate(90deg);
35}
36
37.r-3 {
38  margin-left: calc(var(--scale) * 4.75em);
39  margin-top: calc(var(--scale) * -14em);
40}
41
42.r-4 {
43  margin-left: calc(var(--scale) * -2.75em);
44  margin-top: calc(var(--scale) * -6.25em);
45  transform: rotate(90deg);
46}
47
48.r-5 {
49  margin-left: calc(var(--scale) * -0.5em);
50  margin-top: calc(var(--scale) * -1em);
51  transform: rotate(45deg);
52}
53
54.r-6 {
55  margin-left: calc(var(--scale) * 9.75em);
56  margin-top: calc(var(--scale) * -1em);
57  transform: rotate(-45deg);
58}
59
60.r-7 {
61  margin-left: calc(var(--scale) * 10.25em);
62  margin-top: calc(var(--scale) * -11.75em);
63  transform: rotate(45deg);
64}
65
66.r-8 {
67  margin-left: calc(var(--scale) * -0.5em);
68  margin-top: calc(var(--scale) * -11.75em);
69  transform: rotate(-45deg);
70}
71
72@keyframes rotate {
73  0% {
74    transform: rotate(0deg);
75    --color: yellow;
76  }
77
78  100% {
79    transform: rotate(360deg);
80    --color: orange;
81  }
82}