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>

25%

<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

Preview
HTML

<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>

SCSS

SCSS-files of the component can be found here assets/scss/front/progress/

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