@kabbage/sprout 0.13.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';
css compiled 
@keyframes openPopover {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

.spr-progress-bar-container {
  display: block;
  height: 0.5rem;
  background-color: #e4e5e7;
  border-radius: 0.25rem;
}

.spr-progress-bar-container .spr-progress-bar {
  display: block;
  height: 0.5rem;
  background-color: #2ba148;
  border-radius: 0.25rem;
  transition: width 0.35s ease-out;
}