@kabbage/sprout 2.7.1

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 class="spr-progress-bar-label">1 of 2</div>
</div>

Compiled CSS

Example

scss 
@import 'components/progress-bar';
css compiled 
@keyframes openPopover {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

.spr-icon-rotate-90 {
  transform: rotate(90deg);
}

.spr-icon-rotate-180 {
  transform: rotate(180deg);
}

.spr-icon-rotate-270 {
  transform: rotate(270deg);
}

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

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

.spr-progress-bar-label {
  font-family: "BentonSansBook", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 400;
  text-align: right;
  padding-top: 0.1875rem;
  padding-right: 0.125rem;
}

@media only screen and (max-width: 37.49rem) {
  .spr-progress-bar-label {
    padding-top: 0.5rem;
  }
}