注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery简单时尚的糖果条纹进度条插件ProBars

动画 fishcity 1654浏览

jquery简单时尚的糖果条纹进度条插件ProBars

ProBars是一款时尚的jquery进度条插件,提供多种加载效果兼容性好,在低版本的浏览器中效果会差一些,但也能良好的兼容,jQ酷建议IE10+版本上使用。

使用方法

引入'pro-bars.min.css', 'pro-bars.min.js'和'visible.min.js'到您的文档中。使用ProBars需要一个简单的HTML标记和一些特定的样式类名。插件使用了 Flat UI Color Scheme 来加强样式的美化,如果你没给元素设置颜色类,那ProBars会自动使用一个默认的灰色配色方案,ProBars有两个属性值必须指定,一个是data-pro-bar-percent,用来控制动画的长度百分比和data-pro-bar-delay用来设置动画的延迟。基于ProBars依赖于jQuery使进度条以动画的方式从0变成X的长度,请提供样式类bar-* 给 pro-bar元素便于回调CSS。

<link href="assets/css/pro-bars.min.css" rel="stylesheet" type="text/css" media="all" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="assets/js/visible.min.js" type="text/javascript"></script>
<script src="assets/js/pro-bars.js" type="text/javascript"></script>

html代码

<div class="pro-bar-container color-nephriti">
  <div class="pro-bar bar-50 color-emerald" data-pro-bar-percent="50" data-pro-bar-delay="100">
    <div class="pro-bar-candy"></div>
  </div>
</div>

默认情况下,糖果条纹是静态的,为了糖果条纹向左或向右移动,请绑定candy-ltr类或candy-rtl类到pro-bar-candy元素。如要移除糖果条纹,你可直接删除pro-bar-candy元素,便可得到直线的进度条了。

至此,一个简单的进度条就完成了,您可以参考实例来了解更多的使用方法。

转载请注明:jQ酷 » jquery简单时尚的糖果条纹进度条插件ProBars

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。