@kabbage/sprout 0.25.2

Progress Bar Component

A CSS implementation of the Sprout progress bar component.

.spr-progress-bar-container

scss 
.spr-progress-bar-container {
  display: block;
  height: rem(8px);
  background-color: spr-color(neutral, 20);
  border-radius: spr-border-radius(md);

  .spr-progress-bar {
    display: block;
    height: rem(8px);
    background-color: spr-color(primary, 70);
    border-radius: spr-border-radius(md);
    transition: width 0.35s ease-out;
  }
}

Example

html 
<div class="spr-progress-bar-container">
  <div style="width: 50%;" class="spr-progress-bar"></div>
</div>

Compiled CSS

Example

scss 
@import 'components/progress-bar';