Top

Usage

Provide visual feedback on the progress of an action by utilizing simple progress bars. The width of a progress bar should be defined inline using a width style property.

<div class="progress">
    <div class="progress-bar" style="width: 45%">
        45%
    </div>
</div>

The label within a progress bar is optional, but when present, will be centered within the bar. Applying a min-width on the progress bar will ensure visibility at small widths.

Sizes

Alter the size of a progress bar by adding .small or .large classes.

<div class="progress large">
    ...
</div>

Shapes

Re-shape the outer edges of a progress bar by adding .round or .pill effects.

<div class="progress pill">
    ...
</div>

States

Provide contextual feedback on the type of progress by using the global state classes.

<div class="progress">
    <div class="progress-bar is-info">...</div>
</div>

<div class="progress">
    <div class="progress-bar is-success">...</div>
</div>

<div class="progress">
    <div class="progress-bar is-warning">...</div>
</div>

<div class="progress">
    <div class="progress-bar is-error">...</div>
</div>
All state classes will require styling. The classes simply exist for semantic and structuring reasons.

Stacked Bars

Place multiple bars within a .progress to stack them horizontally.

<div class="progress">
    <div class="progress-bar is-success" style="width: 44%">264</div>
    <div class="progress-bar is-error" style="width: 56%">600</div>
</div>
Top

ARIA

The progressbar role and the appropriate aria-* attributes are required when supporting ARIA. Learn more about this role.

<div class="progress" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 45%">
        45%
    </div>
</div>
Top

Variables

Variable Default Description
$progress-class .progress CSS class name for the progress wrapper.
$progress-class-bar .progress-bar CSS class name for the progress bar element.
$progress-effects ("pill") List of effects to include in the CSS output. Accepts pill.
$progress-transition .5s The transition time for progress bar with and background animations.