1.spinner {
2  width: 56px;
3  height: 56px;
4  display: grid;
5  border-radius: 50%;
6  -webkit-mask: radial-gradient(farthest-side,#0000 40%,#6121d1 41%);
7  background: linear-gradient(0deg ,rgba(97,33,209,0.5) 50%,rgba(97,33,209,1) 0) center/4.5px 100%,
8        linear-gradient(90deg,rgba(97,33,209,0.25) 50%,rgba(97,33,209,0.75) 0) center/100% 4.5px;
9  background-repeat: no-repeat;
10  animation: spinner-d3o0rx 1s infinite steps(12);
11}
12
13.spinner::before,
14.spinner::after {
15  content: "";
16  grid-area: 1/1;
17  border-radius: 50%;
18  background: inherit;
19  opacity: 0.915;
20  transform: rotate(30deg);
21}
22
23.spinner::after {
24  opacity: 0.83;
25  transform: rotate(60deg);
26}
27
28@keyframes spinner-d3o0rx {
29  100% {
30    transform: rotate(1turn);
31  }
32}