Спиннеры на CSS

body {
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-content: center;
  background: black;
}
.a {
  width: 80vmin;
  height: 80vmin;
  background-image:
    radial-gradient(circle, black 0 35%, #fff3 0 60%, black 0),
    repeating-conic-gradient(transparent, black 50%),
    repeating-conic-gradient(salmon, cyan 50%);
  animation: 3s f infinite steps(14);
  filter: blur(16px)contrast(12);
}

@keyframes f {
  to {
    transform: rotate(-1turn);
  }
  50% {
    filter: blur(8px)contrast(4);
  }
}