HTML中的<progress>进度指示元素，你用对了吗？

最近画echarts的时候tooltip中有这么一个进度条：

我就研究了下html中的<progress>：进度指示元素

MDN指路：developer.mozilla.org/zh-CN/docs/…

在全网搜寻了一下之后发现，大家都不爱用progress，因为他的默认样式在不同浏览器中的表现不一致，并且没有动画效果（有的！！！）。

所以这里有修改<progress>默认样式的方案，不用担心不同浏览器对样式的影响

先来一行代码：

<progress value='30' max="100"></progress>

css样式：

progress{
  width: 10rem;
  height: 10px;
  border-radius: 5px;    /*进度条外圆角*/
  background: #f0f2f5;   /*IE中bar颜色值*/
  color: #2A87F8;    [jcode](https://code.juejin.cn/pen/7338323838607818802)    /*IE中value颜色值*/
}
progress::-webkit-progress-bar {
  border-radius: 5px;      /*进度条外圆角*/
  background: #f0f2f5;
}
progress::-webkit-progress-value {
  background: #2A87F8;
  border-radius: 5px;      /*进度条内圆角*/
}

这样就实现了需求中的进度条

还可以加上边框

progress{
  border: 1px solid #2A87F8;
}

以及进行简单的js交互

js代码：

const progress = document.getElementById('progress')
const progressText = document.getElementById('progressText')

function setProgress(value){
  progress.setAttribute('value',value)
  progressText.innerHTML = value + '%'
}

function addProgress(){
  const value = Number(progress.getAttribute('value')) + 10
  setProgress(value)
}

function minusProgress(){
  const value = Number(progress.getAttribute('value')) - 10
  setProgress(value)
}

再在css内加上这个，进度变化就有动画效果

progress::-webkit-progress-value {
  transition: all 1s;
}

完整代码：

嘿嘿，欢迎讨论