Skip to main content
codeFork me on GitHub favoriteMade by Daemon

Progress

Progress indicators are visual indications of an app loading content.

Circular progress

Circular progress is built with a group of HTML elements, below is a detailed example.

<div class="progress-circular">
  <div class="progress-circular-wrapper">
    <div class="progress-circular-inner">
      <div class="progress-circular-left">
        <div class="progress-circular-spinner"></div>
      </div>
      <div class="progress-circular-gap"></div>
      <div class="progress-circular-right">
        <div class="progress-circular-spinner"></div>
      </div>
    </div>
  </div>
</div>

Add additional colour classes (e.g. brand colours: -primary, -secondary, or helper colours: -danger, -info, -success, -warning) to change the appearance of individual circular progress.

<div class="progress-circular progress-circular-primary">
  <div class="progress-circular-wrapper">
    <div class="progress-circular-inner">
      <div class="progress-circular-left">
        <div class="progress-circular-spinner"></div>
      </div>
      <div class="progress-circular-gap"></div>
      <div class="progress-circular-right">
        <div class="progress-circular-spinner"></div>
      </div>
    </div>
  </div>
</div>

Linear progress

Most of the details about linear progress have been covered in Components/Progress documentation. Please refer to this page for more details.

Indeterminate linear progress

When indicators are indeterminate they request that the user wait while something finishes when it’s not necessary to indicate how long it will take.

Create an indeterminate linear progress by adding .progress-bar-indeterminate class.

<div class="progress">
  <div class="progress-bar progress-bar-indeterminate" role="progressbar"></div>
</div>