jQuery横向及纵向进度条插件

所属分类:UI-加载

 25166  255  查看评论 (11)
分享到微信朋友圈
X
jQuery横向及纵向进度条插件 ie兼容8

使用方法

引用

<link rel="stylesheet" href="css/schedule.css">
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/schedule.js"></script>

html

<!--横向进度条-->
<div id="scheduleX"></div>

<!--纵向进度条-->
<div id="scheduleY"></div>

调用对应进度条函数

/*纵向进度条*/
scheduleY({
    fulfill: 55, //选择数
    listAll: 100, //总数
    speed: 25, //动画速度,可选,默认25,越小越快
    again: false, //选择数改变动画是否从零开始,默认true
    bgColor: "#828282", //底部颜色
    listColor: "#5bcde7", //伸缩条颜色,默认原谅绿
    scWidth: "25", //进度条宽度
    scHeight: "300" //进度条高度
});
/*横向进度条*/
scheduleX({
    fulfill: 60, //选择数
    listAll: 100, //总数
    speed: 25, //动画速度,可选,默认25,越小越快
    again: false, //选择数改变动画是否从零开始,默认true从零开始
    bgColor: "#828282", //底部颜色
    listColor: "#ffa439", //伸缩条颜色,默认原谅绿
    scWidth: "400", //进度条宽度
    scHeight: "25" //进度条高度
});
相关插件-加载

圆形进度按钮

执行按钮提交创建圆形进度加载提示
  加载
 29099  393

jQuery顶部加载动画插件loadBar.js

loadBar是一个轻量级的(最小2KB)jQuery插件,当加载内容时,页面顶部显示一个漂亮的动画条。
  加载
 23475  301

纯css3制作绿色loading加载动画特效

纯css3制作绿色loading加载动画特效里面包含14款不同效果的绿色清新loading加载特效。
  加载
 42743  451

jQuery横向及纵向进度条插件

jQuery横向及纵向进度条插件,可控制速度,可设为递增递减进度,可繁可简,颜色尺寸随心所欲!简单使用,使用方法一应俱全。
  加载
 25167  255

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    方 樘 ㄟ 0
    2019/6/10 16:57:19
    可以同时作用于多个进度条吗
        糖球153761346315930
        2019/8/5 8:39:48
        我感觉不能
    回复
    幸运的虫虫 0
    2019/5/16 15:56:29
    ajax 怎么弄呢?
        zhe1
        2019/5/16 19:38:48
        你是所请求的数据么,你请求数据成功后,让后台返回你总数和当前数 fulfill: 55, //选择数 listAll: 100, //总数,把值对应给方法里的这两个值就行了.要请求接口后调用方法,插件没有封装请求的方法的
    回复
    滚子。 0
    2019/4/26 10:23:02
    插件很不错
        zhe0
        2019/5/5 16:06:44
        谢谢( ̄? ̄)~*
    回复
    涩然无味 0
    2018/8/25 11:04:58
    这个进度条不动是为什么
        zhe0
        2018/10/10 13:30:37
        方法调用了么?
    回复
    David Lumin 0
    2018/3/10 13:42:31
    同在南京
        zhe0
        2018/3/14 11:33:50
        我们可以探讨探讨
        涩然无味0
        2018/8/24 21:50:02
        我想要这个插件
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复