前端-进度条实践

最近有需求画横向展示的柱状图，插件开始使用了echarts，实现效果不理想，最后改为表格和进度条配合，完成柱状图（动态的）

关键标签：<progress>

属性：

max: 规定任务一共需要多少工作，就是柱状图100%时对应的值

value: 规定已经完成了多少任务，即柱状图的长度

思路：修改 progress 标签样式，完成横向柱状图。

注意：样式要兼容各个浏览器

例如：

  // -webkit-progress-value 兼容谷歌
  .askAmount progress::-webkit-progress-value {
    background-color: #EA4949;
  }
  // -moz-progress-bar 兼容火狐
  .askAmount progress::-moz-progress-bar {
    background-color: #EA4949;
  }
  // -moz-progress-bar 兼容IE10+
  .askAmount progress::-ms-fill {
    background-color: #EA4949;
  }

<!--dir="rtl" 柱状图居右，用于兼容其它浏览器-->
          

效果如下：