Progress

Displays the status of a task that takes a long time.

Export data

import { createSignal, onSettled } from 'solid-js';
import { Progress } from 'base-ui-solid/progress';
import styles from './index.module.css';

export default function ExampleProgress() {
  const [value, setValue] = createSignal(20);

  // Simulate changes
  onSettled(() => {
    const interval = setInterval(() => {
      setValue((current) => Math.min(100, Math.round(current + Math.random() * 25)));
    }, 1000);
    return () => clearInterval(interval);
  });

  return (
    <Progress.Root class={styles.Progress} value={value()}>
      <Progress.Label class={styles.Label}>Export data</Progress.Label>
      <Progress.Value class={styles.Value} />
      <Progress.Track class={styles.Track}>
        <Progress.Indicator class={styles.Indicator} />
      </Progress.Track>
    </Progress.Root>
  );
}

Anatomy

Import the component and assemble its parts:

Anatomy

import { Progress } from 'base-ui-solid/progress';

<Progress.Root>
  <Progress.Label />
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
  <Progress.Value />
</Progress.Root>;

API reference

Root

Groups all parts of the progress bar and provides the task completion status to screen readers. Renders a <div> element.

Prop

Type

Default

value*Union—

The current value. The component is indeterminate when value is null.number | null

aria-valuetextstring—

A string value that provides a user-friendly name for aria-valuenow, the current value of the progress bar.string

getAriaValueTextfunction—

Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar.((formattedValue: string, value: number | null) => string)

localeIntl.LocalesArgument—

The locale used by Intl.NumberFormat when formatting the value. Defaults to the user’s runtime locale.Intl.LocalesArgument

minnumber0

The minimum value.number

maxnumber100

The maximum value.number

formatIntl.NumberFormatOptions—

Options to format the value.Intl.NumberFormatOptions

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-complete-—

Present when the progress has completed.-

data-indeterminate-—

Present when the progress is in indeterminate state.-

data-progressing-—

Present while the progress is progressing.-

Attribute	Description	-
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in indeterminate state.
`data-progressing`	Present while the progress is progressing.

Root.State

type ProgressRootState = {
  /** The current status. */
  status: Progress.Status;
};

Track

Contains the progress bar indicator. Renders a <div> element.

Prop

Type

Default

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-complete-—

Present when the progress has completed.-

data-indeterminate-—

Present when the progress is in indeterminate state.-

data-progressing-—

Present while the progress is progressing.-

Attribute	Description	-
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in indeterminate state.
`data-progressing`	Present while the progress is progressing.

Track.State

type ProgressTrackState = {
  /** The current status. */
  status: Progress.Status;
};

Indicator

Visualizes the completion status of the task. Renders a <div> element.

Prop

Type

Default

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-complete-—

Present when the progress has completed.-

data-indeterminate-—

Present when the progress is in indeterminate state.-

data-progressing-—

Present while the progress is progressing.-

Attribute	Description	-
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in indeterminate state.
`data-progressing`	Present while the progress is progressing.

Indicator.State

type ProgressIndicatorState = {
  /** The current status. */
  status: Progress.Status;
};

Value

A text element displaying the current value. Renders a <span> element.

Prop

Type

Default

childrenfunction—

-((formattedValue: string | null, value: number | null) => JSX.Element) | null

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-complete-—

Present when the progress has completed.-

data-indeterminate-—

Present when the progress is in indeterminate state.-

data-progressing-—

Present while the progress is progressing.-

Attribute	Description	-
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in indeterminate state.
`data-progressing`	Present while the progress is progressing.

Value.State

type ProgressValueState = {
  /** The current status. */
  status: Progress.Status;
};

Label

An accessible label for the progress bar. Renders a <span> element.

Prop

Type

Default

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-complete-—

Present when the progress has completed.-

data-indeterminate-—

Present when the progress is in indeterminate state.-

data-progressing-—

Present while the progress is progressing.-

Attribute	Description	-
`data-complete`	Present when the progress has completed.
`data-indeterminate`	Present when the progress is in indeterminate state.
`data-progressing`	Present while the progress is progressing.

Label.State

type ProgressLabelState = {
  /** The current status. */
  status: Progress.Status;
};