Progresses

Pass in the progress attribute as an integer (or a string if you're feeling lucky... it'll convert the number to an integer regardless)
= ui.nfg :progress, progress: 25 

= ui.nfg :progress, progress: 25, class: 'my-4'
= ui.nfg :progress, progress: 50, class: 'my-4'
= ui.nfg :progress, progress: 75, class: 'my-4'
= ui.nfg :progress, progress: 90, class: 'my-4'
= ui.nfg :progress, progress: 100, class: 'my-4', describe: 'Tested data describe', tooltip: 'Tested tooltip'
<div class="progress my-4">
  <div class="progress-bar" style="width: 25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress my-4">
  <div class="progress-bar" style="width: 50%;" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress my-4">
  <div class="progress-bar" style="width: 75%;" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress my-4">
  <div class="progress-bar" style="width: 90%;" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress my-4" data-describe="Tested data describe" data-toggle="tooltip" data-placement="top" data-html="true" title="Tested tooltip">
  <div class="progress-bar" style="width: 100%;" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Labels

Labels can be applied in 2 flavors when using the singular :progress component. (infinitely flexible if using the :progress > :progress_bar component setup.)

  1. As a boolean (true) on the label attribute which will output the '[:progress]%'
    = ui.nfg :progress, progress: 25, label: true
    Label will output 25%
  2. As a string
    = ui.nfg :progress, label: 'My label'
  3. As a built out component with a block passed into progress_bar
    = ui.nfg :progress, class: 'my-4' do
    = ui.nfg :progress_bar, progress: 90 do
    Custom block label
60%
Custom string
Custom block label

Height

Manually set height

leaving the :height option out will use the default heigh value from CSS

No height set
height: 50

Thematic size

Traits

Manual

Themes (backgrounds)

Primary
Secondary
Success
Warning
Danger
Dark

Multiple bars

25%
25%
25%

Striped progress bars

Primary Striped
Secondary Striped
Success Striped
Warning Striped
Danger Striped
Dark Striped

Striped Animated

Avert your eyes...

Note: Animation only "works" when striped is enabled. For thematic purposes, the css class will be added to the component even if striped is not enabled.

Primary Striped - Animated

Tooltipped

80%