FTSE Russell Styleguide

Progress Bar 

<div class="progress-container">
    <div class="progress">
        <div class="progress__bar progress__bar--50"></div>
    </div>
    <span class="progress-text">50% Complete</span>
</div>
 
<div class="progress-container">
    <div class="progress">
        <div class="progress__bar progress__bar--50"></div>
    </div>
    <span class="progress-text">50% Complete</span>
</div>
 
/* No context defined for this component. */
  • Content: 
    .progress-container {
  text-align: left;
  margin-top: 4vw;
}

.progress {
  background: rgba(255, 255, 255, 0.2);
  padding: 1px 0;
  text-align: left;

  &__bar {
    background: $white;
    height: 1px;

    &--50 {
      width: 50%;
    }
  }
}

.progress-text {
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
  padding-top: $space-xs;
  font-size: $font-size-sm;
  display: inline-block;
}
  • URL: /components/raw/progress-bar/_progress-bar.scss
  • Filesystem Path: src/components/molecules/progress-bar/_progress-bar.scss
  • Size: 404 Bytes

There are no notes for this item.