This time I will share jQuery Plugin and tutorial about Minimalist Dynamic Progress Bar In jQuery – jsRapBar, hope it will help you in programming stack.
The jsRapBar jQuery plugin lets you create a minimal yet customizable horizontal progress bar that has the ability to update the progress dynamically.
Useful for loading indicators, skill/experience bars, etc.
How to use it:
1. Download and insert the jsRapBar plugin after jQuery JavaScript library.
1 |
< link rel = "stylesheet" href = "jsRapBar.css" > |
3 |
integrity = "sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
4 |
crossorigin = "anonymous" > |
6 |
< script src = "jsRapBar.js" ></ script > |
2. Create a placeholder element for the progress bar.
1 |
< div id = "example" ></ div > |
3. Render a default progress bar inside the container element.
1 |
$( '#example' ).jsRapBar(); |
4. Set the initial percentage value.
1 |
$( '#example' ).jsRapBar({ |
5. Set the height/width of the progress bar.
1 |
$( '#example' ).jsRapBar({ |
6. Set the background color & bar color in hex.
1 |
$( '#example' ).jsRapBar({ |
7. Enable/disable the progress bar.
1 |
$( '#example' ).jsRapBar({ |
8. Update the progress bar to a new value.
1 |
$( '#example' ).SetPosition(value); |
9. Get the current percentage value by clicking the progress bar.
1 |
$( '#example' ).jsRapBar({ |
2 |
<span style= "font-family: monospace; font-size: medium; white-space: pre-wrap;" >onMouseUp</span>: function (value){ |
Changelog:
2021-01-10
2020-12-22
2018-10-18
2018-09-10