Linear Progress Indicator In jQuery - rProgressbar

rProgressbar is a cross-browser, easy-to-use jQuery linear progress indicator which helps you generate an animated, customizable, horizontal bar based on a percentage.

Built with plain JavaScript, HTML, and CSS. No canvas and SVG required. Also can be used as a bar chart to represent your skills, experiences, work progress, etc.

See also:

• Best Circular/Radial Progress Bar Plugins
• Best Progress Bar jQuery Plugins
• Top JavaScript & CSS Progress Bar Components

How to use it:

1. Load jQuery JavaScript library and the rProgressbar plugin in the document.

<link rel="stylesheet" href="/path/to/jquery.rprogessbar.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jQuery.rProgressbar.min.js"></script>

2. Load the jQuery waypoints plugin to execute the animation only when the progress indicator is scrolled into view (OPTIONAL).

<script src="/path/to/jquery.waypoints.js"></script>

3. Attach the function rProgressbar to any placeholder element and specify the percentage in the JavaScript as follows.

<div class="jqueryscript"></div>

$('.jqueryscript').rProgressbar({
  percentage: 99
});

4. To disable the waypoints intergration, You need to make some minor changes to the source code:

// replace...
$(this).waypoint(lineProgressBarInit, { offset: '100%', triggerOnce: true });

// with...
lineProgressBarInit();

5. Customize the appearance of the progress indicator:

• fill color
• background color
• border radius
• bar height
• bar width

$('.jqueryscript').rProgressbar({
  percentage: 99,
  fillBackgroundColor: '#ed1c24',
  backgroundColor: '#EEEEEE',
  borderRadius: '0px',
  height: '10px',
  width: '100%'
});

6. Determine whether to show the percentage count. Default: true.

$('.jqueryscript').rProgressbar({
  percentage: 99,
  ShowProgressCount: false
});

7. Customize the duration of the animation. Default: 1000ms.

$('.jqueryscript').rProgressbar({
  percentage: 99,
  duration: 2000
});

Changelog:

2021-12-30

• added RTL Support

---

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