HTML5 SVG轻量级jQuery进度条插件

当前位置:主页 > Html5库 > SVG > HTML5 SVG轻量级jQuery进度条插件
HTML5 SVG轻量级jQuery进度条插件
分享:

    插件介绍

    这是一款基于HTML5 SVG的轻量级jQuery进度条插件。该进度条插件使用简单,它提供了一些基本的参数来控制进度条的外观和动画,是一款非常实用的进度条插件。

    浏览器兼容性

    浏览器兼容性
    时间:2015-09-26
    阅读:
简要教程

这是一款基于HTML5 SVG的轻量级jQuery进度条插件。该进度条插件使用简单,它提供了一些基本的参数来控制进度条的外观和动画,是一款非常实用的进度条插件。

使用方法

使用该jQuery进度条插件需要引入jQuery和jquery.progress.js文件。

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

该jQuery进度条的HTML结构使用一个<svg>元素来制作。

<svg id="container"></svg>       
              
初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该进度条插件。

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

配置参数

该进度条插件的可用配置参数如下:

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:进度条的宽度。
  • height:进度条的高度。
  • percent:进度条的当前百分比。
  • backgroundColor:进度条的背景色。
  • barColor:进度条的颜色。
  • radius:进度条圆角的半径。
  • fontSize:字体大小。
  • fontColor:字体颜色。
  • increaseSpeed:进度条增加的长度。
  • animate:是否动画。