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

参考   http://www.lanrenzhijia.com/jquery/4121.html

demo下载

<script src="js/jquery.lineProgressbar.js" type="text/javascript"></script> 

    $(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>

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

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});

  

上一篇:hdu 1078(dfs记忆化搜索)


下一篇:安装完sql server 后修改计算机名后不能进行发布的订阅的解决办法