.spinner {
 width: 56px;
 height: 56px;
 display: grid;
 color: #004dff;
 background: radial-gradient(farthest-side, currentColor calc(100% - 7px),#0000 calc(100% - 6px) 0);
 -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 15px),#000 calc(100% - 13px));
 border-radius: 50%;
 animation: spinner-sm4bhi 2s infinite linear;
}

.spinner::before,
.spinner::after {
 content: "";
 grid-area: 1/1;
 background: linear-gradient(currentColor 0 0) center,
          linear-gradient(currentColor 0 0) center;
 background-size: 100% 11px,11px 100%;
 background-repeat: no-repeat;
}

.spinner::after {
 transform: rotate(45deg);
}

@keyframes spinner-sm4bhi {
 100% {
  transform: rotate(1turn);
 }
}