Clickable Dynamic Progress Bar In jQuery Plugin – jsRapBar

Do you want to add loading indicators, skill/experience bars on your websites IF yes then jsRapBar jQuery plugin lets you create a minimal yet customizable horizontal progress bar that has the ability to update the progress dynamically on click event.

Libraries

Load the jsRapBar plugins JS and CSS file along with jQuery core library.

<link rel="stylesheet" href="jsRapBar.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">script>
<script src="jsRapBar.js">script>

HTML

Create simple div element to display progress bar.

JS

Render a default progress bar inside the div container element.

$(function() {  
  $('#progressbar').jsRapBar();
});

List of options you can use to customize the progressbar.

$(function() {  
  $('#progressbar').jsRapBar({
    position: .1, // 10%, default: 0        
    width: '80%',  // default: '100%'
    height: '24px',  // default: '16px'
    barColor: 'black',    // default: 'green'
    backColor:'blue',   // default: 'white'  
    enabled: false // default: 'true'
  });
});

Update the progress bar to a new value.

$(function() {  
  $('#progressbar').SetPosition(newValue);
});

Get the current percentage value by clicking the progress bar.

$(function() {  
$('#progressbar').jsRapBar({
  onClick:function(value){
    alert(value);
  }
});
});

See live demo and download source code.

This awesome plugin is developed by Thibor. Visit their official github repository for more information and follow for future updates.

Related