进度

by 苹果熊

HTML

<div class="pie" id=pie></div>
<p><input type="range" max="100" id=range></p>

CSS

.pie {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #f30;
  padding:2px;
  background-image: linear-gradient(90deg, transparent 50%, #f30 0);
  background-clip: content-box;
  animation-delay: -20s;
}
.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 50s linear infinite, bg 100s step-end infinite;
  animation-play-state: paused;
  animation-delay: inherit;
}
@keyframes spin {
  to {
    transform: rotate(.5turn)
  }
}
@keyframes bg {
  50% {
    background: #f30
  }
}

JavaScript

var pie = document.querySelector('#pie')
var range = document.querySelector('#range')

range.oninput = function() {
	pie.style.animationDelay = -this.value + 's'
}