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"
/>

Guidelines

Progress bars provide a more precise indication of how much remains to be loaded. They should be used in situations where it is important to give the user an accurate progress update. Examples include downloading large files, loading pages with heavy content, uploading files, or performing conversions.

If the waiting time is unknown, consider using a content loader or a spinner instead.

Code

`<ProgressBar />`

import { ProgressBar } from "@vygruppen/spor-react";

Shows determinate progress

Props

Name	Type	Description
`value`	`number`	Value between 0 and 100 (as a percentage)
`label`	`string \| string[]`	Description of what's happening. If an array is passed, the texts are rotated every `labelRotationDelay`seconds
`labelRotationDelay`	`number`	Delay in milliseconds. Default 5000 (5 seconds)
`aria-label`	`string`	Required if you don't pass a label
`height`	`string`	Default 0.5rem
`isActive`	`boolean`	Defaults to true. Used to make the ProgressBar inactive.
`showValueText`	`boolean`	Used to display the percentage of progress completed in the progress bar

Fundamentals

Getting started