Progress

Documentation and examples for using FDS custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

Put that all together, and you have the following examples

How to import progressbar styles:

In order to use progressbars in your project, import following path in your main styles:

@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/progressbar
How to customize progressbar styles:

In order to customize progressbars in your theme as per requirements, import following path in your theme-settings file:

@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/progressbar
(2 of 6) 
<div class="progress-bar progress-primary" style="width: 50%" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <span class="pt--2">(2 of 6)</span>
</div>
<div id="fds--slider--stepper" class="fds-advanced-stepper fds--slider--stepper" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="fds--stepper--head position--relative d--flex align--items--center justify--content--between text--center">
    <div classs="fds--stepper--content">
      <span class="fds-box-counter position--relative d--inline-block bg--white mb--2">
        <span class="fds--stepper--counter btn btn--icon btn--dark--outline rounded--circle mx--5">1</span>
      </span>
      <span class="fds--stepper--title d--block">Prequalification</span>
    </div>
    <div classs="fds--stepper--content">
      <span class="fds-box-counter position--relative d--inline-block bg--white mb--2">
        <span class="fds--stepper--counter btn btn--icon btn--dark--outline rounded--circle mx--5">2</span>
      </span>
      <span class="fds--stepper--title d--block">Product Recommendation</span>
    </div>
    <div classs="fds--stepper--content">
      <span class="fds-box-counter position--relative d--inline-block bg--white mb--2">
        <span class="fds--stepper--counter btn btn--icon btn--dark--outline rounded--circle mx--5">3</span>
      </span>
      <span class="fds--stepper--title d--block">Prescreening</span>
    </div>
    <div classs="fds--stepper--content">
      <span class="fds-box-counter position--relative d--inline-block bg--white mb--2">
        <span class="fds--stepper--counter btn btn--icon btn--dark--outline rounded--circle mx--5">4</span>
      </span>
      <span class="fds--stepper--title d--block">Client Info</span>
    </div>
    <div classs="fds--stepper--content">
      <span class="fds-box-counter position--relative d--inline-block bg--white mb--2">
        <span class="fds--stepper--counter btn btn--icon btn--dark--outline rounded--circle mx--5">5</span>
      </span>
      <span class="fds--stepper--title d--block">Decision</span>
    </div>
  </div>
</div>