Progress bars

import ProgressBarAnimated from '!!raw-loader!../examples/ProgressBar/Animated'; import ProgressBarBasic from '!!raw-loader!../examples/ProgressBar/Basic'; import ProgressBarContextual from '!!raw-loader!../examples/ProgressBar/Contextual'; import ProgressBarScreenreaderLabel from '!!raw-loader!../examples/ProgressBar/ScreenreaderLabel'; import ProgressBarStacked from '!!raw-loader!../examples/ProgressBar/Stacked'; import ProgressBarStriped from '!!raw-loader!../examples/ProgressBar/Striped'; import ProgressBarWithLabel from '!!raw-loader!../examples/ProgressBar/WithLabel';

Example

Default progress bar.

<CodeBlock language="jsx" live> {ProgressBarBasic} </CodeBlock>

With label

Add a label prop to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.

<CodeBlock language="jsx" live> {ProgressBarWithLabel} </CodeBlock>

Screenreader only label

Add a visuallyHidden prop to hide the label visually.

<CodeBlock language="jsx" live> {ProgressBarScreenreaderLabel} </CodeBlock>

Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

<CodeBlock language="jsx" live> {ProgressBarContextual} </CodeBlock>

Striped

Uses a gradient to create a striped effect.

<CodeBlock language="jsx" live> {ProgressBarStriped} </CodeBlock>

Animated

Add animated prop to animate the stripes right to left.

<CodeBlock language="jsx" live> {ProgressBarAnimated} </CodeBlock>

Stacked

Nest <ProgressBar />s to stack them.

<CodeBlock language="jsx" live> {ProgressBarStacked} </CodeBlock>

API

ProgressBar

<PropsTable name="ProgressBar" />