Progressbar

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: