css变量 + css渐变 制作进度条

css 终于有了变量。我们可以用它来做一些很棒的事情。比如制作进度条，制作主题换肤等等。

关于 css 变量的介绍我推荐阮一峰老师的篇文章 CSS 变量教程

关于 css 变量的兼容性，大部分手机是不支持的，不过亲测在安卓下面的微信是支持的，至于iphone中的微信，由于手头没有苹果机，故兼容暂不知。

css 制作的进度条的效果图如下：

html代码：

  <div class="box">
    <input id="num" type="number" value="50" min="0" max="100">
    <div class="progressbar"></div>
  </div>

css 代码：

body {
  display: flex;
  height: 100vh;
}
.box {
  margin: auto;
}
input {
  border-radius: 4px;
  margin-bottom: 20px;
  width: 80px;
  border: 1px solid teal;
}
.progressbar {
  margin: auto;
  height: 10px;
  width: 100px;
  border-radius: 4px;
  background: #ccc linear-gradient(to right, red var(--scroll), transparent 0);  
}

js 代码：

var progress = document.querySelector('.progressbar')
var num = document.querySelector('#num')
progress.style.setProperty('--scroll', num.value + '%')
num.oninput = e => {
  progress.style.setProperty('--scroll', num.value + '%')
}

demo链接