Minimalist Dynamic Progress Bar In jQuery - jsRapBar

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

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.

<link rel="stylesheet" href="jsRapBar.css">
<script src="" 
<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.


4. Set the initial percentage value.

  position: .1 // 10%, default: 0

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


  // default: '100%'
  width: '80%',

  // default: '16px'
  height: '24px'

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


  // default: 'green'
  barColor: 'black',

  // default: 'white'


7. Enable/disable the progress bar.


  // default: 'true'
  enabled: false


8. Update the progress bar to a new value.


9. Get the current percentage value by clicking the progress bar.




  • JS & CSS update


  • JS & CSS update


  • JS update


  • JS & CSS update

This awesome jQuery plugin is developed by Thibor. For more Advanced Usages, please check the demo page or visit the official website.