进度条插件使用demo

Posted 2020-09-27

1、下载地址：

http://down.htmleaf.com/1502/201502031710.zip

2、效果图：

3、html代码：其中80设置当前所占百分比，即蓝色部分比例；注意引入必须的js文件

<div class="pro-bar-container">
    <div class="pro-bar" data-pro-bar-percent="80"></div>
</div>

<script src="../js/jquery-1.11.1.min.js"></script>
<script src="http://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="../js/appear.min.js"></script>
<script src="../js/pro-bars.min.js"></script>

4、CSS代码：

.pro-bar-container{
    background: #d5d5d5;  //设置进度条背景颜色
    width: 160px;         //设置整个进度条宽度
    border-radius: 20px;  //设置进度条边角弧度
}

.pro-bar{
    background: #38ADFF;  //设置进度条颜色
    height: 10px;         //设置进度条高度
    border-radius: 20px;
}

上述例子为插件其中一种样式candy stripes removed的demo，详细样式参见：http://www.htmleaf.com/Demo/201502031322.html