1.spinner {
2 width: 56px;
3 height: 56px;
4 display: grid;
5 color: #004dff;
6 background: radial-gradient(farthest-side, currentColor calc(100% - 7px),#0000 calc(100% - 6px) 0);
7 -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 15px),#000 calc(100% - 13px));
8 border-radius: 50%;
9 animation: spinner-sm4bhi 2s infinite linear;
10}
11
12.spinner::before,
13.spinner::after {
14 content: "";
15 grid-area: 1/1;
16 background: linear-gradient(currentColor 0 0) center,
17          linear-gradient(currentColor 0 0) center;
18 background-size: 100% 11px,11px 100%;
19 background-repeat: no-repeat;
20}
21
22.spinner::after {
23 transform: rotate(45deg);
24}
25
26@keyframes spinner-sm4bhi {
27 100% {
28  transform: rotate(1turn);
29 }
30}