Skip to content
Vy logo
Components

ProgressBar

A progress bar shows how far in a process the user has come.

Examples

A ProgressBar with a given progress percentage

<ProgressBar 
  value={50} 
  marginY={3} 
  maxWidth="300px" 
/>

A labeled ProgressBar

<ProgressBar 
  value={30} 
  label="Betaler"
  marginY={3}
  maxWidth="300px"
/>

An inactive ProgressBar

<ProgressBar 
  value={50} /* Doesn't matter what value is here when the isActive is set to false */ 
  marginY={3} 
  isActive={false} 
  maxWidth="300px" 
/>

A ProgressBar with texts that changes every 5 seconds

<ProgressBar 
  value={30)
  label={["Kontakter bank", "Verifiserer", "Straks ferdig"]} 
  marginY={3}
  maxWidth="300px"
/>