Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

ProgressLoader

A progress loader is a loading indicator that shows you how far in a process the user has come.

FigmaGitHub

Examples

A progress loader with a set progress

<ProgressLoader value={50} maxWidth="150px" />

A labeled progress loader

<ProgressLoader 
  label="Betaler" 
  value={50} 
  maxWidth="150px" 
/>

A progress loader with a label that changes every 5 seconds

<ProgressLoader 
  label={["Kontakter bank", "Verifiserer", "Straks ferdig"]} 
  value={30}
  maxWidth="150px"
/>

A more advanced example, with dummy loading value

() => {
  const [value, setValue] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setValue((prev) => {
        const next = prev + 10;
        return next > 100 ? 0 : next; // Restart when over 100
      });
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <ProgressLoader
      label={["Kontakter bank", "Verifiserer", "fullfører"]}
      value={value}
      maxWidth="150px"
      labelRotationDelay={3666}
    />
  );
}

Guidelines

Progress loaders provide a more accurate indication of how much remains to be loaded. They should be used in situations where it is important to give the user an exact progress update. Downloading large files, loading pages with heavy content, uploading, or converting files are examples where using progress loaders is essential.

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

Code

<ProgressLoader />

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

Props

Name
Type
Required?
Description
valuenumberValue between 0 and 100 (the percentage)
labelstring | string[]A descriptive text that shows up below. If an array is passed, it switches the text every `labelRotationDelay` seconds
labelRotationDelaynumberDelay in milliseconds. Default 5000 (5 seconds)
aria-labelstringRequired if you don't pass a label
widthstringDefaults to 100%