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-bar-{color} for contextual colours.

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

Striped & animated

Striped

Animated

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

<div class="velin-progress-bar velin-progress-bar-striped
            velin-progress-bar-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>