Springboard

Progress 

<progress value="30" max="100">30%</progress>
 
<progress value="{{ value }}" max="{{ max }}">{{ percent }}%</progress>
 
{
  "max": 100,
  "value": 30,
  "percent": 30
}
  • Content: 
    $color-progress-bg: #ddd;

progress {
  border-radius: .15em;
  height: 1rem;
  width: 100%;
  color: $color-primary;
  background-color: $color-progress-bg;
  overflow: hidden;
  appearance: none;

  &::-webkit-progress-inner-element {
    border: none;
  }

  &::-webkit-progress-bar {
    background-color: $color-progress-bg;
  }

  &::-webkit-progress-value {
    background-color: $color-primary;
  }

  &::-moz-progress-bar {
    background-color: $color-primary;
  }

  &::ms-fill {
    background-color: $color-progress-bg;
  }
}
  • URL: /components/raw/progress/_sass.scss
  • Filesystem Path: components/01-elements/05-misc/progress/_sass.scss
  • Size: 538 Bytes

There are no notes for this item.