Progress

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

This page shows some example usage of the <BsProgress> component. For the full documentation please refer to the API Docs. You might also want to consult the official Bootstrap Docs for general information.
50%
<BsProgress as |pg|>
  <pg.bar @value={{50}} />
</BsProgress>

Options

default

50%
<BsProgress as |pg|>
  <pg.bar
    @value={{50}}
    @minValue={{0}}
    @maxValue={{100}}
    @showLabel={{false}}
    @roundDigits={{0}}
    @type="default"
    @striped={{false}}
    @animate={{false}}
   />
</BsProgress>

Stacked

50%
20%
5%
<BsProgress as |pg|>
  <pg.bar
    @value={{50}}
    @minValue={{0}}
    @maxValue={{100}}
    @showLabel={{false}}
    @roundDigits={{0}}
    @type="default"
    @striped={{false}}
    @animate={{false}}
  />
  <pg.bar
    @value={{20}}
    @minValue={{0}}
    @maxValue={{100}}
    @showLabel={{false}}
    @roundDigits={{0}}
    @type="warning"
    @striped={{false}}
    @animate={{false}}
  />
  <pg.bar
    @value={{5}}
    @minValue={{0}}
    @maxValue={{100}}
    @showLabel={{false}}
    @roundDigits={{0}}
    @type="danger"
    @striped={{false}}
    @animate={{false}}
  />
</BsProgress>