Lexicon v1.0.32

Progress Bars

Multi Step Progress Bar

Multi Step Progress Bar by default fits to its container.

  • Ticket Buyer Information
    01
  • Attendee Information
    02
  • Submit Payment
    03
  • Complete Registration
    07

Add class multi-step-progress-bar-collapse to collapse the progress bar in mobile view.

  • Ticket Buyer Information
    01
  • Attendee Information
    02
  • Submit Payment
    03
  • Step 4
    04
  • Step 5
    05
  • Step 6
    06
  • Complete Registration
    07

Use class multi-step-progress-bar-fixed to create equal width progress bar items. The width can be changed through the sass variable $multi-step-progress-bar-fixed-width.

  • Ticket Buyer Information
    01
  • Attendee Information
    02
  • Submit Payment
    03
  • Step 4
    04
  • Step 5
    05
  • Step 6
    06
  • Complete Registration
    07

Plain Progress Bars

60% Complete
100% Complete
2% Complete 
<div class="progress">
    <div aria-valuenow="#" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: #%;">
        <span class="sr-only">#%</span>
    </div>
</div>

Progress Bars with Label

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

Contextual Progress Bars

60% (Success)
100% (Info)
40% (Warning)
80% (Danger)
<div class="progress">
    <div aria-valuenow="#" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-success" role="progressbar" style="width: #%;">#%</div>
</div>

Striped Contextual Progress Bars

60% (Success)
100% (Info)
40% (Warning)
80% (Danger)
<div class="progress">
    <div aria-valuenow="#" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-striped progress-bar-success" role="progressbar" style="width: #%;">#%</div>
</div>

Active Progress Bars

60% (Success)
100% (Info)
40% (Warning)
80% (Danger)
20% (Default)
<div class="progress">
    <div aria-valuenow="#" aria-valuemin="0" aria-valuemax="100" class="active progress-bar progress-bar-striped progress-bar-success" role="progressbar" style="width: #%;">#%</div>
</div>

Stacked Progress Bars

25%
25%
25%
50%
50%
33%
33%
45%
45%
10%
10%
10%
10%
10%
10%
10%
<div class="progress">
    <div class="progress-bar" style="width: #%">#%</div>
    <div class="progress-bar" style="width: #%">#%</div>
</div>

Progress Bar Sizes

Extra Small
15%
Default
25%
Large
45%
Extra Large
100%
<div class="progress progress-xs">
    <div aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 15%;">15%</div>
</div>