5.3 forms.progress-bar Progress bar

Toggle example guides Toggle HTML markup

Shows the progress of a task in a simple bar graph.

Examples
Default styling
60%
Installing...
.progress-bar--inline
An inline progress bar.
60%
Installing...
Markup: forms/progress-bar/progress-bar.twig 
<div class="progress-bar {{modifier_class}}">
  <div class="progress-bar__bar"><div class="progress-bar__fill" style="width: 60%"></div></div>
  <div class="progress-bar__percentage">60%</div>
  <div class="progress-bar__message">Installing...</div>
</div>
Source: forms/progress-bar/_progress-bar.scss, line 1