loading

by 苹果熊

HTML

<div class="pie"></div>

CSS

.pie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #f30;
  padding:2px;
  background-image: linear-gradient(90deg, transparent 50%, #f30 0);
  background-clip: content-box;
}
.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  background-color: inherit;
  border-radius: 0 100% 100% 0 / 50%;
  transform-origin: left;
  animation: spin 20s linear infinite, bg 40s step-end infinite;
}
@keyframes spin {
  to {
    transform: rotate(.5turn)
  }
}
@keyframes bg {
  50% {
    background: #f30
  }
}