.spinner {
  position: relative;
  width: var(--size);
  height: var(--size);
}

.spinner span {
  position: absolute;
  left: calc(var(--size) * 0.45);
  top: calc(var(--size) * 0.025);
  width: calc(var(--size) * 0.125);
  height: calc(var(--size) * 0.3);
  border-radius: 999px;
  transform-origin: center calc(var(--size) * 0.475);
  background: #cfd9e3;
  animation: fade 1s linear infinite;
}

.spinner span:nth-child(1)  { transform: rotate(0deg);   animation-delay: -0.916s; }
.spinner span:nth-child(2)  { transform: rotate(30deg);  animation-delay: -0.833s; }
.spinner span:nth-child(3)  { transform: rotate(60deg);  animation-delay: -0.75s; }
.spinner span:nth-child(4)  { transform: rotate(90deg);  animation-delay: -0.666s; }
.spinner span:nth-child(5)  { transform: rotate(120deg); animation-delay: -0.583s; }
.spinner span:nth-child(6)  { transform: rotate(150deg); animation-delay: -0.5s; }
.spinner span:nth-child(7)  { transform: rotate(180deg); animation-delay: -0.416s; }
.spinner span:nth-child(8)  { transform: rotate(210deg); animation-delay: -0.333s; }
.spinner span:nth-child(9)  { transform: rotate(240deg); animation-delay: -0.25s; }
.spinner span:nth-child(10) { transform: rotate(270deg); animation-delay: -0.166s; }
.spinner span:nth-child(11) { transform: rotate(300deg); animation-delay: -0.083s; }
.spinner span:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; }

@keyframes fade {
  0% {
    background: #002f5f;
  }
  100% {
    background: #dfe7ee;
  }
}