GNWT Base Theme Style Guide

7.1.1 ui-components.progress.linear Linear Progress

Toggle example guides Toggle HTML markup

Linear format progress meter.

A linear progress meter can be used to visually display the percentage a task is complete in a traditional horizontal bar chart, with a numeral or percentage displayed above the bar.

The HTML is made up of two nested <div> elements, one inside the other. There is .progress-linear available to be applied to the outer <div> and .overlay applied to the inner <div> to display the number above. To apply a specific percentage, apply .progress-linear-{percentage-integer} to the outer <div>.

Examples
Default styling
66 of 200 completed
110 of 200 completed
89%
.progress-linear--bold
Bold version with thicker lines
66 of 200 completed
110 of 200 completed
89%
.progress-linear--nested
Nested version, where values displayed in meters
66 of 200 completed
110 of 200 completed
89%
.progress-linear--primary
Primary brand colour
66 of 200 completed
110 of 200 completed
89%
Markup: ui/progress/_progress-linear.twig 
<div class="layout-3col">

  <div class="layout-3col__col-1">
    <div class="progress-linear {{modifier_class}} progress-linear-33">
      <div class="overlay">66 of 200 completed</div>
    </div>
  </div>

  <div class="layout-3col__col-2">
    <div class="progress-linear {{modifier_class}} progress-linear-55">
      <div class="overlay">110 of 200 completed</div>
    </div>
  </div>

  <div class="layout-3col__col-3">
    <div class="progress-linear {{modifier_class}} progress-linear-89">
      <div class="overlay">89%</div>
    </div>
  </div>

</div>
Source: sass/ui/progress/_progress-linear.scss, line 1