Progress Animation
Animated progress bar. For more examples, check out the Progress components page.
How to use?
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/vendor/appear.js"></script>
<script src="../../assets/vendor/hs-progress-bar/dist/hs-progress-bar.min.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of horizontal progress bars
$('.js-hr-progress').each(function () {
var horizontalProgressBar = new HSProgressBar($(this), {
direction: 'horizontal',
indicatorSelector: '.js-hr-progress-bar'
}).init();
});
});
</script>
Horizontal example
<div class="js-hr-progress progress">
<div class="js-hr-progress-bar progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
Vertical example
<div class="w-50 mx-auto">
<div class="row">
<div class="col-lg-1 mb-5 mb-lg-0">
<div class="js-vr-progress progress-vertical rounded">
<div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-1 mb-5 mb-lg-0">
<div class="js-vr-progress progress-vertical rounded">
<div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-1 mb-5 mb-lg-0">
<div class="js-vr-progress progress-vertical rounded">
<div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 23%;" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-1 mb-5 mb-lg-0">
<div class="js-vr-progress progress-vertical rounded">
<div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 39%;" aria-valuenow="39" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-1 mb-5 mb-lg-0">
<div class="js-vr-progress progress-vertical rounded">
<div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 26%;" aria-valuenow="26" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-1 mb-5 mb-lg-0">
<div class="js-vr-progress progress-vertical rounded">
<div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 98%;" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-1 mb-5 mb-lg-0">
<div class="js-vr-progress progress-vertical rounded">
<div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 71%;" aria-valuenow="71" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-lg-1 mb-5 mb-lg-0">
<div class="js-vr-progress progress-vertical rounded">
<div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 55%;" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// initialization of progress bar
$('.js-hr-progress').each(function () {
var horizontalProgressBar = new HSProgressBar($(this), {
indicatorSelector: '.js-hr-progress-bar',
afterUpdate: function() {
alert('afterUpdate callback done!');
}
}).init();
});
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-progress-bar-options='{
...
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-progress-bar-options='{}'.
| Parameters | Description | Default value |
|---|---|---|
|
|
Determines the direction of the progress bar (horizontal or vertical) | 'horizontal' |
|
|
If true, then it defines the element to be initialized as a progress bar, otherwise it searches inside the element to be initialized for an element with the class specified in indicatorSelector |
false |
|
|
If useProgressElement is false, then defines the element to initialize inside the element to be initialized |
'.hs-progress-bar-indicator' |
|
|
Executes code inside the function body immediately after the element is animated | - |