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/dist/appear.min.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

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

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

JavaScript behavior

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

direction

Determines the direction of the progress bar (horizontal or vertical) 'horizontal'

useProgressElement

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

indicatorSelector

If useProgressElement is false, then defines the element to initialize inside the element to be initialized '.hs-progress-bar-indicator'

afterUpdate

Executes code inside the function body immediately after the element is animated -