GNWT Base Theme Style Guide

7.1.2 ui-components.progress.radial Radial Progress

A radial progress meter can be used to visually display the percentage a task is complete and includes a numeral in the center of the circle.

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

Examples

Default styling

Numeral: 66 of 200

Numeral: 100 of 200

100

Percentage

89%

.progress-radial--bold

Bold version with thicker lines

Numeral: 66 of 200

Numeral: 100 of 200

100

Percentage

89%

.progress-radial--primary

Primary brand colour

Numeral: 66 of 200

Numeral: 100 of 200

100

Percentage

89%

.progress-radial--success

Success colour

Numeral: 66 of 200

Numeral: 100 of 200

100

Percentage

89%

.progress-radial--warning

Warning colour

Numeral: 66 of 200

Numeral: 100 of 200

100

Percentage

89%

.progress-radial--danger

Danger colour

Numeral: 66 of 200

Numeral: 100 of 200

100

Percentage

89%

Markup: ui/progress/_progress-radial.twig

<div class="layout-3col">

  <div class="layout-3col__col-1">
    <h3 style="text-align:center;">Numeral: 66 of 200</h3>
    <div class="progress-radial {{modifier_class}} progress-radial-33">
      <div class="overlay">66</div>
    </div>
  </div>

  <div class="layout-3col__col-2">
    <h3 style="text-align:center;">Numeral: 100 of 200</h3>
    <div class="progress-radial {{modifier_class}} progress-radial-50">
      <div class="overlay">100</div>
    </div>
  </div>

  <div class="layout-3col__col-3">
    <h3 style="text-align:center;">Percentage</h3>
    <div class="progress-radial {{modifier_class}} progress-radial-89">
      <div class="overlay">89%</div>
    </div>
  </div>

</div>

Source: sass/ui/progress/_progress-radial.scss, line 1