Displays the current progress of an operation flow. User understanding increases when paired with labels or numbers.
import React from 'react' import { ProgressSimple } from '../..' const ProgressSimpleDefault = () => { return ( <div> <ProgressSimple percent={45} /> </div> ) } export default ProgressSimpleDefault
import React from 'react' import { ProgressSimple } from '../..' const ProgressSimpleValue = () => { return ( <div> <ProgressSimple align="left" percent={68} /> <br /> <ProgressSimple max="10" value="2" /> </div> ) } export default ProgressSimpleValue
import React from 'react' import { ProgressSimple } from '../..' const ProgressSimpleValue = () => { return ( <div> <ProgressSimple percent={40} width="100px" /> </div> ) } export default ProgressSimpleValue
Progress Simple can pass colors - primary, green, red, and yellow. Variants names are default
, positive
, negative
, and warning
, respectively.
import React from 'react' import { ProgressSimple } from '../..' const ProgressSimpleVariants = () => { return ( <div> <ProgressSimple percent={64.5} /> <br /> <ProgressSimple percent={90} variant="positive" /> <br /> <ProgressSimple percent={10} variant="negative" /> <br /> <ProgressSimple percent={40} variant="warning" /> </div> ) } export default ProgressSimpleVariants
import React from 'react' import { ProgressSimple } from '../..' const ProgressSimpleMuted = () => { return ( <div> <ProgressSimple muted percent={68} /> </div> ) } export default ProgressSimpleMuted
import React from 'react' import { ProgressSimple } from '../..' const ProgressSimpleAlign = () => { return ( <div> <ProgressSimple align="left" percent={45} width="100px" /> <br /> <ProgressSimple align="center" percent={45} width="100px" /> <br /> <ProgressSimple align="right" percent={45} width="100px" /> </div> ) } export default ProgressSimpleAlign
Do not use as turbolinks bar.