Lightweight HTML5 SVG jQuery Progress Bar Plugin
Quick Tutorial
This is a lightweight jQuery progress bar plugin based on HTML5 SVG. This progress bar plugin is easy to use and provides several basic parameters for controlling the appearance and animation of the progress bar. It is a practical and useful progress bar plugin.
Usage
To use this jQuery progress bar plugin, you need to include jQuery and the jquery.progress.js file.
1 2 | <script src="js/jquery.min.js"></script> <script src="js/jquery.progress.js"></script> |
HTML Structure
The HTML structure of this jQuery progress bar uses an <svg> element.
1 | <svg id="container"></svg> |
Initialize the Plugin
After the page DOM elements have finished loading, you can initialize the progress bar plugin using the following method.
1 2 3 4 5 6 | var progress = $("#container").Progress({ percent: 20, width: 180, height: 40, fontSize: 16}); |
Configuration Parameters
The available configuration options for this progress bar plugin are as follows:
1 2 3 4 5 6 7 8 9 10 11 12 | 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: The width of the progress bar.
height: The height of the progress bar.
percent: The current percentage of the progress bar.
backgroundColor: The background color of the progress bar.
barColor: The color of the progress bar.
radius: The radius of the progress bar's rounded corners.
fontSize: Font size.
fontColor: Font color.
increaseSpeed: The amount by which the progress bar increases.
animate: Whether to enable animation.