进度条（ progress bar）

示例

HTML

<input id="slider" name="slider" type="range" value=0>
<label for="slider">0</label>

CSS

html, body {
  margin: 0
  height: 100%
}


body
  display: flex
  justify-content: center
  align-items: center
  background-color: #a9cbee
  
track()
  width: 100%
  height: 20px
  background: #eee
  border-radius: 10px
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)
  cursor: pointer
  
thumb()
  border: none
  height: 50px
  width: 50px
  background-color: transparent
  background-image: url(https://storage.googleapis.com/pw-stuff/thumbs-sprite.png)
  background-position: 0 0
  background-size: cover
  transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg))
  cursor: pointer


thumbActive()
  background-position: 100% 0px
  transform: scale(2.0) rotateZ(var(--thumb-rotate, 10deg))


input[type="range"]
  -webkit-appearance: none
  background: transparent
  width: 90%
  max-width: 500px
  outline: none


  &:focus,
  &:active,
  &::-moz-focus-inner,
  &::-moz-focus-outer
    border: 0
    outline: none


  &::-moz-range-thumb
    thumb()
    
  &::-moz-range-thumb:active
    thumbActive()
    
  &::-moz-range-track
    track()
  
  &::-moz-range-progress
    height: 20px
    background: #4685d7
    border-radius: 10px
    cursor: pointer
    
  &::-webkit-slider-thumb
    thumb()
    margin-top: -15px
    -webkit-appearance: none
    
  &::-webkit-slider-thumb:active
    thumbActive()
    
  &::-webkit-slider-runnable-track
    track()
    -webkit-appearance: none
   
label
  background: #eee
  border-radius: 50%
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)
  padding: 14px
  margin-left: 10px
  font-family: Roboto, 'Helvetica Neue', Arial
  font-size: 20px
  width: 25px
  text-align: center
  color: darken(#4685d7, 20%)
  font-weight: bold
  content: ''

JS

const input = document.querySelector("input");
const label = document.querySelector("label");
input.addEventListener("input", event => {
  const value = Number(input.value) / 100;
  input.style.setProperty("--thumb-rotate", `${value * 720}deg`);
  label.innerHTML = Math.round(value * 50);
});