HTML5 SVG輕量級(jí)jQuery進(jìn)度條插件

簡(jiǎn)要教程

這是一款基于HTML5 SVG的輕量級(jí)jQuery進(jìn)度條插件。該進(jìn)度條插件使用簡(jiǎn)單，它提供了一些基本的參數(shù)來(lái)控制進(jìn)度條的外觀和動(dòng)畫(huà)，是一款非常實(shí)用的進(jìn)度條插件。

使用方法

使用該jQuery進(jìn)度條插件需要引入jQuery和jquery.progress.js文件。

<script src="js/jquery.min.js"></script> 
<script src="js/jquery.progress.js"></script>

HTML結(jié)構(gòu)

該jQuery進(jìn)度條的HTML結(jié)構(gòu)使用一個(gè)<svg>元素來(lái)制作。

<svg id="container"></svg>

初始化插件

在頁(yè)面DOM元素加載完畢之后，可以通過(guò)下面的方法來(lái)初始化該進(jìn)度條插件。

var progress = $("#container").Progress({
  percent: 20,
  width: 180,
  height: 40,
  fontSize: 16
});

配置參數(shù)

該進(jìn)度條插件的可用配置參數(shù)如下：

var settings = {
  width: 90, // the width of bar
  height: 20, // the height of bar
  percent: 0, // the current percent
  backgroundColor: '#555', // the color of the background
  barColor: '#d9534f', // the color of the bar
  radius: 4, // the radius of the corner
  fontSize: 12, // the font size
  fontColor: '#fff', // the color of the number
  increaseSpeed: 1, // the increase length
  animate: true // whether to use animation
};

• width：進(jìn)度條的寬度。

• height：進(jìn)度條的高度。

• percent：進(jìn)度條的當(dāng)前百分比。

• backgroundColor：進(jìn)度條的背景色。

• barColor：進(jìn)度條的顏色。

• radius：進(jìn)度條圓角的半徑。

• fontSize：字體大小。

• fontColor：字體顏色。

• increaseSpeed：進(jìn)度條增加的長(zhǎng)度。

• animate：是否動(dòng)畫(huà)。