Minimalist Dynamic Progress Bar In jQuery - jsRapBar

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.

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.


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