实现带背景图片的进度条

最近需要做一个进度条，带渐变背景的，如下图

首先想到用背景图做，再细想，可以用剪切背景图的形式实现（设计师提供100%状态的图片），于是想到了之前很少使用的 background-clip 属性。
他有四种取值：

padding-box： 从padding区域（不含padding）开始向外裁剪背景。
border-box： 从border区域（不含border）开始向外裁剪背景。
content-box： 从content区域开始向外裁剪背景。
text： 从前景内容的形状（比如文字）作为裁剪区域向外裁剪。

于是选用content-box，配合padding调整裁剪范围：

css:
  .bar{
    width:  300px;
    height: 30px;
    padding-right: 100%;     //背景图完全被剪切，0%的状态
    background-clip: content-box;
    background-size: contain;
    background-image: url(**.png);
    transition: all  0.5s;
  }

html:
  


javascript:
  document.querySelector('.bar').style.paddingRight = (100 - percent)+"%";   //percent为需要显示的百分比值