
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.
1. Download and insert the jsRapBar plugin after jQuery JavaScript library.
<link rel="stylesheet" href="jsRapBar.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="jsRapBar.js"></script>
2. Create a placeholder element for the progress bar.
<div id="example" ></div>
3. Render a default progress bar inside the container element.
$('#example').jsRapBar();
4. Set the initial percentage value.
$('#example').jsRapBar({ position: .1 // 10%, default: 0 });
5. Set the height/width of the progress bar.
$('#example').jsRapBar({ // default: '100%' width: '80%', // default: '16px' height: '24px' });
6. Set the background color & bar color in hex.
$('#example').jsRapBar({ // default: 'green' barColor: 'black', // default: 'white' backColor:'blue' });
7. Enable/disable the progress bar.
$('#example').jsRapBar({ // default: 'true' enabled: false });
8. Update the progress bar to a new value.
$('#example').SetPosition(value);
9. Get the current percentage value by clicking the progress bar.
$('#example').jsRapBar({ onClick:function(value){ alert(value); } });
This awesome jQuery plugin is developed by Thibor. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 13.08.2018
- Source