Progress indicator

1/3

HTML

    
<div class="progress-indicator" data-step="1" data-steps="3"><em>1</em>/3</div>

SCSS

    .progress-indicator {
  @include small-font;
  color: $grey-L20;
  position: relative;
  margin-bottom: 16px;

  em {
    font-style: normal;
    font-weight: 700;
    color: $turquoise;
  }

  .progress-indicator__steps {
    display: block;
    margin-bottom: 6px;
    height: 16px;
    width: 100%;
    background-color: $grey-L66;
  }

  .progress-indicator__step {
    position: absolute;
    top: 0;
    display: block;
    height: 16px;
    width: attr(data-width);
    background-color: $turquoise;
  }
}

Connect Dementia Research

Pattern Library

Progress indicator

HTML

SCSS