Progress

Custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

How To

  1. Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Simple Example

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

HTML
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  </div>
</div>
Default
60%
Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

60%
40%
90%
50%
Striped

Uses a gradient to create a striped effect.

30%
60%
40%
90%
50%
Animated

Add .active to .progress-bar-striped to animate the stripes right to left.

60%
40%
90%
50%
Stacked

Place multiple bars into the same .progress to stack them.