Progress

Linear Progress

import * as React from "react";
import { LinearProgress } from "spaceweb/progress";

export default () => {
  return <LinearProgress value={25} />;
}

Circular Progress

import * as React from "react";
import { CircularProgress } from "spaceweb/progress";

export default () => {
  return <CircularProgress value={25} />;
}

Accessibility

If the progress bar is describing the loading progress of a particular region of a page, you should use aria-describedby to point that region to the progress bar, and set the aria-busy attribute to true on that region until it has finished loading.

Examples

To render nested linear progress, you need to pass first and last prop to the respective first and last ProgressSegment.

Linear Progress props

Circular Progress props

You can check the implementation of the component for more details.