首页 > 其他 > 详细

进度条插件使用demo

时间:2017-07-10 23:20:54      阅读:377      评论:0      收藏:0      [点我收藏+]

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

进度条插件使用demo

原文:http://www.cnblogs.com/dreamsqin/p/7147868.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!