Skip Navigation
React Magma

Progress Bar

A Progress Bar can be used to show a user how far along they are in a process. Progress bars are used within the Loading Indicator component.

Basic Usage

import React from 'react';


import { ProgressBar } from 'react-magma-dom';


export function Example() {
  return <ProgressBar percentage={25} />;
}

Percentage

The percentage prop is used to display how much of the bar should be filled in. The default value is 0. This value can be adjusted dynamically.

import React from 'react';


import { ProgressBar, Button, ButtonGroup, Spacer } from 'react-magma-dom';


export function Example() {
  const [percentage, setPercentage] = React.useState(0);


  function handleIncrease() {
    setPercentage(percent => percent + 10);
  }


  function handleDecrease() {
    setPercentage(percent => percent - 10);
  }


  return (
    <>
      <ProgressBar percentage={percentage} />
      <Spacer size={12} />
      <ButtonGroup>
        <Button disabled={percentage >= 100} onClick={handleIncrease}>
          Increase
        </Button>
        <Button disabled={percentage <= 0} onClick={handleDecrease}>
          Decrease
        </Button>
      </ButtonGroup>
    </>
  );
}

Animated

The isAnimated prop can be used to set animation in the progress bar. Because of the problems that animation can create for people who are sensitive to such things, we automatically disable it in the progress bar if we detect that the prefers-reduced-motion media query is set.

import React from 'react';


import { ProgressBar } from 'react-magma-dom';


export function Example() {
  return <ProgressBar isAnimated percentage={50} />;
}

Background Color

The color prop can be used to set the background color of the progress bar. This prop takes the following values: primary, danger, success or a color string. The default value is primary which renders as #3942B0, or magma.colors.primary.

import React from 'react';


import { ProgressBar, ProgressBarColor } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <ProgressBar color={ProgressBarColor.primary} percentage={25} />
      <br />
      <ProgressBar color={ProgressBarColor.danger} percentage={25} />
      <br />
      <ProgressBar color={ProgressBarColor.success} percentage={25} />
      <br />
    </>
  );
}

Custom Color

When using a custom color, you must ensure that there is proper color contrast between the chosen color and the bar border (whether you're using the inverse color or not).

import React from 'react';


import { ProgressBar, magma, Card, CardBody } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Card>
        <CardBody>
          <ProgressBar color={magma.chartColors[8]} percentage={32} />
          <br />
          <ProgressBar color="#B84900" percentage={50} />
        </CardBody>
      </Card>
      <br />
      <Card isInverse>
        <CardBody>
          <ProgressBar
            isInverse
            color={magma.chartColorsInverse[8]}
            percentage={72}
          />
          <br />
          <ProgressBar isInverse color="#FFB685" percentage={20} />
        </CardBody>
      </Card>
    </>
  );
}

Height

The height prop can be used to set the height of the progress bar. Can be a string or a number; if a number is provided the height will be in pixels.

The default value is '8px'.

import React from 'react';


import { ProgressBar } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <ProgressBar height={10} percentage={25} />
      <br />
      <ProgressBar height="2em" percentage={25} />
    </>
  );
}

Inverse

isInverse is an optional boolean prop, that may be passed in when the component is to be displayed on a dark background. When the isInverse prop is used, the default background color of the progress bar is #CDDEFF or magma.colors.tertiary.

import React from 'react';


import { ProgressBar, Card, CardBody } from 'react-magma-dom';


export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <ProgressBar isInverse percentage={25} />
      </CardBody>
    </Card>
  );
}

Label Visible

If the isLabelVisible prop is true, the percentage value will display to the right of the progress bar.

import React from 'react';


import { ProgressBar } from 'react-magma-dom';


export function Example() {
  return <ProgressBar isLabelVisible percentage={25} />;
}

Progress Bar Props

This component uses forwardRef. The ref is applied to the outer div element.

All of the global HTML attributes can be provided as props and will be applied to the wrapping div element that gets rendered.

color

Description

The color variant of the progress bar

Type

ProgressBarColor | string

Default

ProgressBarColor.primary

height

Description

The height of the progress bar. Can be a string or number; if number is provided height is in px

Type

number | string

Default

8

isAnimated

Description

If true, the progress bar with have a shimmer animation

Type

boolean

Default

false

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

isLabelVisible

Description

If true, the label with the percentage value will display to the right of the progress bar

Type

boolean

Default

false

percentage

Description

The percentage of which the bar is filled

Type

number

Default

0

On this page

Deploys by Netlify