Progress Deprecated

Open in Storybook

George uses modified Bootstrap .progress bars as level-meter for money on e.g. credit cards or accounts. Here are basic versions for one or more bars:

Colour

Default colour of a George progress bar is dark blue, but you can assign any .g-bg-* background colour class to a .progress-bar to create different colours:

Labels

You can add a label to each progress bar. This is done by adding an invisible .g-bg-transparent div to hold the label. Unfortunately, there is no pure CSS solution to move that label into the bar if the space to its right is too small, this has to be done in JavaScript:

Tooltips

You can assign individual Tooltips to each .progress-bar. To enable tooltips on the empty part, add another fake .g-bg-transparent area.

html<div class="progress">
  <div
    class="progress-bar"
    role="progressbar"
    style="width: 15%"
    aria-valuenow="15"
    aria-valuemin="0"
    aria-valuemax="100"
    data-toggle="tooltip"
    data-placement="top"
    data-html="true"
    title="I am a tooltip!"
  >
    15%
  </div>
  ... more bars ...
</div>