Design System
v4.9.5
⌘K

Linear Progress (Alpha)

Jump to Props

Communicate the status of a system process.

On this page

Import

import { LinearProgress } from "@vitality-ds/components";

Usage

A progress bar is used to show that a user's request has been received and the application is working to fulfill it. It gives users information about the state of ongoing processes and if their request is being executed.

<LinearProgress value={43} />

Indeterminate State

To help the user to understand the current state of an in-progress process, this component and show an indeterminate animation. Technically, this will display when value is either null (ie. not known) or if the indeterminate prop is passed explicitly. A value of 0 will not show indeterminate, as it is assumed that the progress has started and is at 0%.

<div
  style={{ width: "100%", display: "flex", flexDirection: "column", gap: 8 }}
>
  <LinearProgress indeterminate />
  <LinearProgress />
  <LinearProgress value={0} />
</div>

Example

<div style={{ flex: 1, maxWidth: 320 }}>
  <LegacyPaper>
    <Stack align="stretch" spacing="xs">
      <Stack
        direction="horizontal"
        justify="between"
        align="center"
        spacing="xs"
      >
        <Stack direction="horizontal" align="center" spacing="xs">
          <Attachment size="sm" />
          <Typography variant="display100">IMG_245.jpg</Typography>
        </Stack>
        <Stack direction="horizontal" align="center" spacing="xs">
          <Typography variant="caption" color="lowContrast">
            42%
          </Typography>
          <IconButton
            size="compact"
            icon={<Close />}
            tooltipContent="Cancel Upload"
          />
        </Stack>
      </Stack>
      <LinearProgress value={42} />
    </Stack>
  </LegacyPaper>
</div>

Props

indeterminate

Description

Boolean to represent the indeterminate state of the component

Type

boolean

value

Description

A numerical value between 0 and 100 to indicate the percent completed of a progress

Type

number

© 2025