Simple jQuery Progress Bar Plugin LineProgressbar.js
Add-ons
Plugin Description: LineProgressbar.js is one of the simplest jQuery progress bar plugins. It allows you to create animated linear progress bars and configure properties such as color, height, and rounded corners.
LineProgressbar.js is one of the simplest jQuery progress bar plugins. It allows you to create animated linear progress bars and configure properties such as color, height, and rounded corners.
Usage
Include the jquery.lineProgressbar.css and jquery.lineProgressbar.js files in your page.
1 2 | <link rel="stylesheet" href="path/to/jquery.lineProgressbar.css"><script src="path/to/js/circleMagic.js"></script> |
Use a <div> element as the progress bar container.
1 | <div id="progressbar1"></div> |
After the page DOM elements have finished loading, initialize this jQuery progress bar plugin using the LineProgressbar() method.
1 | $('#progressbar1').LineProgressbar(); |
The available configuration options for the LineProgressbar.js progress bar plugin include:
Parameters
Defines the width of the progress bar.
| Type | Default Value | Description | |
| percentage | int | null | Defines the percentage value of the progress bar. |
| ShowProgressCount | boolean | true | Defines whether to display the percentage value. |
| duration | int | 1000 | Defines the animation speed of the progress bar. The default is 1000 milliseconds. You can use an integer value or the keywords: slow or fast. |
| fillBackgroundColor | string | '#3498db' | Defines the background fill color of the progress bar. |
| backgroundColor | string | '#EEEEEE' | Defines the background color of the progress bar. |
| radius | string | '0px' | Defines the rounded corners of the progress bar. |
| height | string | '10px' | Defines the height of the progress bar. |
| width | string | '100%' |
Comments