Progressbar

In groundhog since v2.0.0

Examples


<progress class="progressbar" value="50" max="100"></progress>
    

<div class="theme--royalblue">
  <label class="label--progressbar" for="p0">50/100</label>
  <progress class="progressbar" value="50" max="100" id="p0"></progress>
</div>
    

<div class="theme--purple">
  <label class="label--progressbar" for="p1">50/100 days</label>
  <progress class="progressbar" value="50" max="100" if="p1"></progress>
</div>
    

Introduction

The Groundhog progress bar component visually enhances the standard html <progress> element. It is typically accompanied by a text - indicating the progress in numbers.

Including the progress bar component

  1. To include a progress bar component into your project, first create the <progress> element and set value and max attribues:
    <progress value="50" max="100"></progress>
    
  2. To add the visual enhancements of Groundhog, add the necessary class to the elements class attribute:
    <progress class="progressbar" value="50" max="100"></progress>
    
  3. To additionally show the text - indicating the progress - add a <span> element and set label--progressbar to the elements class attribute, like shown in the examples:
    <span class="label--progressbar">50/100 days</span>
    <progress class="progressbar" value="50" max="100"></progress>
    

Available themes for the groundhog progress bar

The default theme for the progress bar is turquoise, other available themes are:

class name theme color
.theme--blue Base class blue theme
.theme--purple Base class purple theme
.theme--green Base class green theme
.theme--royalblue Base class royalblue theme