Progress Bar

.c-progress

hide code

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

Animate

.c-progressbar >.c-progress__bar.-animate

hide 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

hide 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

.c-progress.-light

hide code

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

.c-progressbar.-success

hide code

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