1.spinner {
2  --red: #d62d20;
3  --blue: #0057e7;
4  --green: #008744;
5  --yellow: #ffa700;
6  position: relative;
7  width: 60px;
8}
9
10.spinner:before {
11  content: "";
12  display: block;
13  padding-top: 100%;
14}
15
16.circular {
17  animation: rotate73451 2s linear infinite;
18  height: 100%;
19  transform-origin: center center;
20  width: 100%;
21  position: absolute;
22  top: 0;
23  bottom: 0;
24  left: 0;
25  right: 0;
26  margin: auto;
27}
28
29.path {
30  stroke-dasharray: 1, 200;
31  stroke-dashoffset: 0;
32  animation: dash0175 1.5s ease-in-out infinite, color7123 6s ease-in-out infinite;
33  stroke-linecap: round;
34}
35
36@keyframes rotate73451 {
37  100% {
38    transform: rotate(360deg);
39  }
40}
41
42@keyframes dash0175 {
43  0% {
44    stroke-dasharray: 1, 200;
45    stroke-dashoffset: 0;
46  }
47
48  50% {
49    stroke-dasharray: 89, 200;
50    stroke-dashoffset: -35px;
51  }
52
53  100% {
54    stroke-dasharray: 89, 200;
55    stroke-dashoffset: -124px;
56  }
57}
58
59@keyframes color7123 {
60  100%, 0% {
61    stroke: var(--red);
62  }
63
64  40% {
65    stroke: var(--blue);
66  }
67
68  66% {
69    stroke: var(--green);
70  }
71
72  80%, 90% {
73    stroke: var(--yellow);
74  }
75}
76
77
78