body {
  --time:12s;
  --count:13;
  --spokes:6;
  height: 100vh;
  overflow: hidden;
}
body .circles {
  -webkit-animation: rotate var(--time) linear infinite;
          animation: rotate var(--time) linear infinite;
}
body .circles, body .circles .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
body .circles .circle {
  width: 50vmin;
  height: 50vmin;
  border-radius: 50%;
  -webkit-animation: rotate var(--time) linear infinite;
          animation: rotate var(--time) linear infinite;
  -webkit-animation-delay: calc(var(--animation-delay, 0) * var(--time)/var(--count));
          animation-delay: calc(var(--animation-delay, 0) * var(--time)/var(--count));
}
body .circles .circle .inner {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 25vmin;
  height: 25vmin;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  animation: rotate calc(var(--time)/var(--spokes)) ease infinite reverse;
  -webkit-animation-delay: calc(var(--animation-delay, 0) * var(--time)/var(--count));
          animation-delay: calc(var(--animation-delay, 0) * var(--time)/var(--count));
}
body .circles .circle .inner .dot {
  position: absolute;
  bottom: 0%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 5vmin;
  height: 5vmin;
}
body .circles .circle .inner .dot:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 8vmin;
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}