1.loader {
2  width: 44.8px;
3  height: 44.8px;
4  color: #554cb5;
5  position: relative;
6  background: radial-gradient(11.2px,currentColor 94%,#0000);
7}
8
9.loader:before {
10  content: '';
11  position: absolute;
12  inset: 0;
13  border-radius: 50%;
14  background: radial-gradient(10.08px at bottom right,#0000 94%,currentColor) top    left,
15          radial-gradient(10.08px at bottom left ,#0000 94%,currentColor) top    right,
16          radial-gradient(10.08px at top    right,#0000 94%,currentColor) bottom left,
17          radial-gradient(10.08px at top    left ,#0000 94%,currentColor) bottom right;
18  background-size: 22.4px 22.4px;
19  background-repeat: no-repeat;
20  animation: loader 1.5s infinite cubic-bezier(0.3,1,0,1);
21}
22
23@keyframes loader {
24  33% {
25    inset: -11.2px;
26    transform: rotate(0deg);
27  }
28
29  66% {
30    inset: -11.2px;
31    transform: rotate(90deg);
32  }
33
34  100% {
35    inset: 0;
36    transform: rotate(90deg);
37  }
38}