Progress

Linear progress bars with multiple sizes, contextual colors, striped and animated variants, plus an indeterminate mode.

Basic progress

25%

50%

75%

<div class="velin-progress">
  <div class="velin-progress__bar" role="progressbar"
       style="width: 25%" aria-valuenow="25"
       aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Sizes

Add .velin-progress--sm or .velin-progress--lg for thinner or thicker bars.

60%

<div class="velin-progress velin-progress--sm">…</div>
<div class="velin-progress velin-progress--lg">…</div>

Colors

Use .velin-progress--{color} on the track for contextual colours.

<div class="velin-progress--success" …></div>
<div class="velin-progress--warning" …></div>
<div class="velin-progress--danger"  …></div>
<div class="velin-progress--info"    …></div>

Striped & animated

Striped

Animated

<div class="velin-progress--striped" …>Striped</div>

<div class="velin-progress--striped
            velin-progress--animated" …>Animated</div>

Indeterminate

Add .velin-progress--indeterminate when the duration is unknown.

<div class="velin-progress velin-progress--indeterminate">
  <div class="velin-progress__bar"></div>
</div>