简单的jquery进度条插件LineProgressbar.js

所属分类:UI-加载

 34702  335  查看评论 (3)
分享到微信朋友圈
X
简单的jquery进度条插件LineProgressbar.js ie兼容6

LineProgressbar.js是一款最简单的jquery进度条插件。通过LineProgressbar.js可以创建带动画效果的线性进度条,你可以配置进度条的颜色,高度,圆角等属性。

使用方法

在页面中引入jquery.lineProgressbar.css和jquery.lineProgressbar.js文件.

<link rel="stylesheet" href="path/to/jquery.lineProgressbar.css">
<script src="path/to/js/circleMagic.js"></script>

使用一个<div>作为进度条的容器。

<div id="progressbar1"></div>

在页面DOM元素加载完毕之后,通过下LineProgressbar()方法来初始化该jquery进度条插件。

$('#progressbar1').LineProgressbar();

LineProgressbar.js进度条插件的可用配置参数有:

参数

定义进度条的宽度。

类型默认值描述
percentageintnull定义进度条的百分比数。
ShowProgressCountbooleantrue定义是否显示百分比数值。
durationint1000定义进度条动画的速度。默认为1000毫秒。可以使用整数值孟获关键字:slow或fast。
fillBackgroundColorstring'#3498db'定义进度条的背景填充色。
backgroundColorstring'#EEEEEE'定义进度条的背景色。
radiusstring'0px'定义进度条的圆角。
heightstring'10px'定义进度条的高度。
widthstring'100%'
相关插件-加载
  加载
 36946  365

精美进度条

色彩绚丽的进度条,代码简单,动画感强
  加载
 41702  390

圆形进度按钮

执行按钮提交创建圆形进度加载提示
  加载
 38756  471

11种Loading 动态效果+随机样式

css实现动态loading 效果
  加载
 70577  507

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

    До свидания 0
    2017/12/12 16:46:52

    问一下 怎么控制百分比显示的位置  在线等

    回复
    五科? 0
    2017/11/6 6:14:35

    谢谢楼主的慷概分享

    回复
    网站建设推广-壹起航阿凯 0
    2017/10/16 15:10:01
    这个可以控制它随着网页滚动到这个位置再加载么 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复