CSS实现不规则自定义进度条效果

进度条效果做为网站常用模块无论是投资理财类、还是众筹类、加载提示类网站已经比较常见。另外，HTML5新增了progress标签，其重要程度可见一斑。
由于HTML的progress存在兼容性问题，本文主要讲解如何通过CSS实现一个简单的自定义进度条效果！
前端开发常用的进度条效果如下：

进度条效果 1.jpg 进度条效果 2.jpg

（环形进度条下次再讲！）
这两个算是比较有代表性的，一个的均匀的一个的不均匀的，实现起来略有不用。

以第一个为例：
这种比较简单，只需要两个div标签就可以了（一个标签也可以实现，后文会讲到）
原理介绍：
外层div用来显示进度条总长度以及背景色；内层div用来显示当前进度条进度，和当前进度条颜色。
结构如下：

<div class="progress round-conner">
    <div class="curRate round-conner"></div>
</div>

样式如下：

<style>
.progress {
  width: 300px;
  background: #ddd;
}
.curRate {
  width: 75%;
  background: #f30;
}
.round-conner {
  height: 30px;
  border-radius: 15px;
}
</style>

此时效果如下：

效果图.jpg

只需要利用js动态控制上层div的宽度就可以实现最简单的自定义进度条了.

** 第二种带原点的进度条 **
此时实现原理跟第一种类似，只是背景色替换成了背景图片，图片如下：

进度条图片.png

这两个图片除了颜色不一样以外其他是一样大小的！

如果上面的能理解我想这个就不难理解了吧，不过为了显得文章完整还是简单做一个demo如下：

作为背景图的图片高度要等于进度条最大高度【原点高度】
HTML结构不变，css如下：

.progress {
  width: 514px; // 进度条总宽度514px
  background: url(line.png) left bottom no-repeat;
}
.curRate {
  width: 50%;
  background: url(line.png) left top no-repeat; // 进度条高亮在拼图顶部
}
.round-conner {
  height: 12px; // 进度条原点高度为12px
}

效果如下：

不规则进度条.jpg

下次更新环形进度条....
喜欢请关注作者：大白PM http://www.jianshu.com/users/a1fcad83da71