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

参考http://www.lanrenzhijia.com/jquery/4121.html
【简单的jquery进度条插件LineProgressbar.js,myProgress.js】
demo下载


$(function(){ $('#progressbar1').LineProgressbar({ percentage: 50 }); $('#progressbar2').LineProgressbar({ percentage: 25, fillBackgroundColor: '#1abc9c' }); $('#progressbar3').LineProgressbar({ percentage: 61, fillBackgroundColor: '#e67e22', height: '35px' }); $('#progressbar4').LineProgressbar({ percentage: 78, fillBackgroundColor: '#f1c40f', height: '65px', radius: '50px' }); })


在页面中引入jquery.lineProgressbar.css和jquery.lineProgressbar.js文件.
1 2 < link rel = "stylesheet" href = "path/to/jquery.lineProgressbar.css" > < script src = "path/to/js/circleMagic.js" > script >
使用一个作为进度条的容器。
1 < div id = "progressbar1" > div >
在页面DOM元素加载完毕之后,通过下LineProgressbar()方法来初始化该jquery进度条插件。
1 $( '#progressbar1' ).LineProgressbar();
LineProgressbar.js进度条插件的可用配置参数有:
参数
定义进度条的宽度。


类型 默认值 描述
percentage int null 定义进度条的百分比数。
ShowProgressCount boolean true 定义是否显示百分比数值。
duration int 1000 定义进度条动画的速度。默认为1000毫秒。可以使用整数值孟获关键字:slow或fast。
fillBackgroundColor string '#3498db' 定义进度条的背景填充色。
backgroundColor string '#EEEEEE' 定义进度条的背景色。
radius string '0px' 定义进度条的圆角。
height string '10px' 定义进度条的高度。
width string '100%'

=====================================================
基于jQuery实现的myProgress.js加载loading动画效果 参考 :http://www.lanrenzhijia.com/jquery/3303.html
demo下载
$("#div1").myProgress({speed: 1000, percent: 30, width: "100px", height: "10px"}); $("#div2").myProgress({speed: 500, percent: 100}); $("#div3").myProgress({speed: 4000, percent: 50,width: "500px"}); $("#div4").myProgress({speed: 1000, percent: 1});



转载于:https://www.cnblogs.com/dare/p/9046352.html

    推荐阅读