SOURCE

<div class="hollow-box">
  <div class="inner-box">
  </div>
</div>

body {
  background-color: white;
}

$hollow-box-size: 160px;
$inner-box-size: 80px;
$two-box-distance: ($hollow-box-size -$inner-box-size) / 2;
$one-step-dur: 2s;
$all-dur: $one-step-dur * 2;
@keyframes rotate-hollow {
  100% {
    transform: rotateZ(-360deg);
  }
}

@keyframes animation-hollow-before {
  0% {
    transform: rotateZ(0);
  }
  24% {
    z-index: -100;
  }
  25% {
    transform: rotateZ(0);
    z-index: 1;
  }
  50% {
    transform: rotateZ(-180deg);
  }
  74% {
    z-index: 100;
  }
  75% {
    transform: rotateZ(-180deg);
    z-index: -1;
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

@keyframes rotate-inner-before {
  0% {
    transform: rotateZ(0);
  }
  25% {
    transform: rotateZ(-180deg);
  }
  50% {
    transform: rotateZ(-180deg);
  }
  75% {
    transform: rotateZ(-360deg);
  }
  100% {
    transform: rotateZ(-360deg)
  }
}

@keyframes rotate-inner-after {
  0% {
    transform: rotateZ(0);
  }
  50% {
    transform: rotateZ(0);
  }
  75% {
    transform: rotateZ(-180deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

.hollow-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: $hollow-box-size;
  height: $hollow-box-size;
  border: 2px solid red;
  border-radius: 50%;
  border-top-color: transparent;
  animation: rotate-hollow $one-step-dur linear infinite;
  &:before {
    position: absolute;
    content: '';
    top: $two-box-distance;
    left: $two-box-distance;
    width: $inner-box-size;
    height: $inner-box-size / 2;
    border-radius: $inner-box-size $inner-box-size 0 0;
    background-color: red;
    transform-origin: 50% 100%;
    animation: animation-hollow-before $all-dur linear infinite;
    z-index: -100;
  }
  .inner-box {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: red;
    &:before,
    &:after {
      position: absolute;
      content: '';
      background-color: blue;
      top: 0;
      left: 0;
      width: 100%;
      height: 50%;
      border-radius: 80px 80px 0 0;
    }
    &:before {
      transform-origin: 50% 100%;
      animation: rotate-inner-before $all-dur linear infinite;
    }
    &:after {
      top: 50%;
      transform-origin: 50% 0;
      border-radius: 0 0 $inner-box-size $inner-box-size;
      animation: rotate-inner-after $all-dur linear infinite;
    }
  }
}