1.spinner {
2 --R: 28px;
3 --g1: #004dff 96%, #0000;
4 --g2: #d6d6fc 96%, #0000;
5 width: calc(2*var(--R));
6 height: calc(2*var(--R));
7 border-radius: 50%;
8 display: grid;
9 -webkit-mask: linear-gradient(#000 0 0);
10 animation: spinner-maxc6n 2s infinite linear;
11}
12
13.spinner::before,
14.spinner::after {
15 content: "";
16 grid-area: 1/1;
17 width: 50%;
18 background: radial-gradient(farthest-side,var(--g1)) calc(var(--R) + 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R)   - var(--R)),
19        radial-gradient(farthest-side,var(--g1)) calc(var(--R) + 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R)   - var(--R)),
20        radial-gradient(farthest-side,var(--g2)) calc(var(--R) + 0.5*var(--R)   - var(--R)) calc(var(--R) - 0.866*var(--R) - var(--R)),
21        radial-gradient(farthest-side,var(--g1)) 0 calc(-1*var(--R)),
22        radial-gradient(farthest-side,var(--g2)) calc(var(--R) - 0.5*var(--R)   - var(--R)) calc(var(--R) - 0.866*var(--R) - var(--R)),
23        radial-gradient(farthest-side,var(--g1)) calc(var(--R) - 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R)   - var(--R)),
24        radial-gradient(farthest-side,var(--g2)) calc(-1*var(--R))  0,
25        radial-gradient(farthest-side,var(--g1)) calc(var(--R) - 0.866*var(--R) - var(--R)) calc(var(--R) + 0.5*var(--R)   - var(--R));
26 background-size: calc(2*var(--R)) calc(2*var(--R));
27 background-repeat: no-repeat;
28}
29
30.spinner::after {
31 transform: rotate(180deg);
32 transform-origin: right;
33}
34
35@keyframes spinner-maxc6n {
36 100% {
37  transform: rotate(-1turn);
38 }
39}