Progress Bar

Introduction

Progress bars indicate progress towards the completion of a task or an indeterminate loading state.

Examples



Usage

ProgressBar

import React from "react";
import { ProgressBar } from "@commure/components-foundation";
function MyProgressBar() {
return (
<ProgressBar animate intent="primary" stripes value=".5"/>
);
}
export default MyProgressBar;

API Reference

ProgressBar

Prop NameRequired?TypeDescription
animatefalsebooleanWhether the background should animate.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
intentfalseIntentVisual intent color to apply to element.
stripesfalsebooleanWhether the background should be striped.
valuefalsenumberA value between 0 and 1 (inclusive) representing how far along the operation is. Values below 0 or above 1 will be interpreted as 0 or 1, respectively. Omitting this prop will result in an "indeterminate" progress meter that fills the entire bar.

Related Reading

Blueprint Reference
Spinners