簡單的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});