Dynamic Progress Bar jsRapBar - Free Download Minimalist Dynamic Progress Bar In jQuery - jsRapBar

Free Download Minimalist Dynamic Progress Bar In jQuery – jsRapBar

Posted on

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.

Dynamic Progress Bar jsRapBar - Free Download Minimalist Dynamic Progress Bar In jQuery - jsRapBar
File Size: 4.69 KB
Views Total: 4553
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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">
5 </script>
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({
2   position: .1 // 10%, default: 0
3 });

5. Set the height/width of the progress bar.

1 $('#example').jsRapBar({
2  
3   // default: '100%'
4   width: '80%',
5  
6   // default: '16px'
7   height: '24px'
8    
9 });

6. Set the background color & bar color in hex.

1 $('#example').jsRapBar({
2  
3   // default: 'green'
4   barColor: 'black',
5  
6   // default: 'white'
7   backColor:'blue'
8  
9 });

7. Enable/disable the progress bar.

1 $('#example').jsRapBar({
2  
3   // default: 'true'
4   enabled: false
5  
6 });

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){
3     alert(value);
4   }
5 });

Changelog:

2021-01-10

  • JS & CSS update

2020-12-22

  • JS & CSS update

2018-10-18

  • JS update

2018-09-10

  • JS & CSS update