STYLED MDL

Loading

Indicate loading and progress states.

Progress Bar

/*--- Default Progress Bar ---*/
<Progress percent="40%" width="300px" />

Indeterminate Progress Bar

/*--- Indeterminate Progress Bar ---*/
<Progress indeterminate width="300px" />

Spinners

/*--- Spinner ---*/
<Spinner active />

/*--- Single Color Spinner ---*/
<Spinner active singleColor/>

Usage

<Progress>

PropTypeDefaultDescription
indeterminatebooleanfalseIf set to true, it will display an indeterminate progress bar
precentstringundefinedSets the percent complete, currently this must be a properly formatted string
widthstring500pxSets the width of the bar as a css value (e.g. 300px)

<Spinner>

PropTypeDefaultDescription
activebooleanfalseControls whether or not the spinner is active and visible
singleColorbooleanfalseDisplays the spinner in a single color