Progress Bar

INFO

The progress bar is used to show the (loading) progress of a process.

.c-progress > .c-progress__bar.h-width-30

<div class="c-progress">
  <div class="c-progress__bar h-width-30"></div>
</div>

Animate

.c-progressbar > .c-progress__bar.-animate[style="animation-duration: 10s"]

Show Code

<div class="c-progress">
  <div class="c-progress__bar -animate" style="animation-duration: 10s"></div>
</div>

With Text

.c-progressbar > .c-progress__bar > .c-progress__bar__text

Frage 1 / 5

Show Code

<div class="c-progress">
  <div class="c-progress__bar h-width-25">
    <span class="c-progress__bar__text">Frage 1 / 5</span>
  </div>
</div>

Modifiers

Light Version

.c-progress.-light

Show Code

  <div class="c-progress -light">
    <div class="c-progress__bar h-width-70"></div>
  </div>

Success Color

.c-progressbar.-success

Show Code

<div class="c-progress">
  <div class="c-progress__bar -success h-width-70"></div>
</div>