简单的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});