Progress

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

How To

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%

<Division Class="progress" HtmlDiv="True">
  <Division Class="progress-bar" HtmlDiv="True" Style="width: 60%" />
</Division>

Contextual alternatives

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

60%

40%

90%

50%

<Division Class="progress" HtmlDiv="True">
  <Division Class="progress-bar bg-success" HtmlDiv="True" Style="width: 60%">
    <Label Caption="60%" />
  </Division>
</Division>
<Division Class="progress" HtmlDiv="True">
  <Division Class="progress-bar bg-info" HtmlDiv="True" Style="width: 40%">
    <Label Caption="40%" />
  </Division>
</Division>
<Division Class="progress" HtmlDiv="True">
  <Division Class="progress-bar bg-warning" HtmlDiv="True" Style="width: 90%">
    <Label Caption="90%" />
  </Division>
</Division>
<Division Class="progress" HtmlDiv="True">
  <Division Class="progress-bar bg-danger" HtmlDiv="True" Style="width: 50%">
    <Label Caption="50%" />
  </Division>
</Division>

Striped

Uses a gradient to create a striped effect.

30%

60%

40%

90%

50%

<Division Class="progress" HtmlDiv="True">
  <Division Class="progress-bar progress-bar-striped" HtmlDiv="True" Style="width: 30%">
    <Label Caption="30%" />
  </Division>
</Division>
<Division Class="progress" HtmlDiv="True">
  <Division Class="progress-bar bg-success progress-bar-striped" HtmlDiv="True" Style="width: 60%">
    <Label Caption="60%" />
  </Division>
</Division>
<Division Class="progress" HtmlDiv="True">
  <Division Class="progress-bar bg-info progress-bar-striped" HtmlDiv="True" Style="width: 40%">
    <Label Caption="40%" />
  </Division>
</Division>
<Division Class="progress" HtmlDiv="True">
  <Division Class="progress-bar bg-warning progress-bar-striped" HtmlDiv="True" Style="width: 90%">
    <Label Caption="90%" />
  </Division>
</Division>
<Division Class="progress" HtmlDiv="True">
  <Division Class="progress-bar bg-danger progress-bar-striped" HtmlDiv="True" Style="width: 50%">
    <Label Caption="50%" />
  </Division>
</Division>

Animated

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

60%

40%

90%

50%

<Division Class="progress" HtmlDiv="True">
  <Division Class="progress-bar bg-success progress-bar-striped progress-bar-animated" HtmlDiv="True" Style="width: 60%">
    <Label Caption="60%" />
  </Division>
</Division>
<Division Class="progress" HtmlDiv="True">
  <Division Class="progress-bar bg-info progress-bar-striped progress-bar-animated" HtmlDiv="True" Style="width: 40%">
    <Label Caption="40%" />
  </Division>
</Division>
<Division Class="progress" HtmlDiv="True">
  <Division Class="progress-bar bg-warning progress-bar-striped progress-bar-animated" HtmlDiv="True" Style="width: 90%">
    <Label Caption="90%" />
  </Division>
</Division>
<Division Class="progress" HtmlDiv="True">
  <Division Class="progress-bar bg-danger progress-bar-striped progress-bar-animated" HtmlDiv="True" Style="width: 50%">
    <Label Caption="50%" />
  </Division>
</Division>

Stacked

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

<Division Class="progress" HtmlDiv="True">
  <Division Class="progress-bar" HtmlDiv="True" Style="width: 20%" />
  <Division Class="progress-bar bg-success" HtmlDiv="True" Style="width: 30%" />
  <Division Class="progress-bar bg-info progress-bar-striped" HtmlDiv="True" Style="width: 10%" />
  <Division Class="progress-bar bg-warning" HtmlDiv="True" Style="width: 20%" />
  <Division Class="progress-bar bg-danger progress-bar-striped progress-bar-animated" HtmlDiv="True" Style="width: 15%" />
</Division>