progress.md

Progress

Progress component provides a graphical status for tasks that take some amount of time to load. It follows WAI-ARIA Progressbar Pattern.

Table of Contents

• Usage
• Other Examples
• Accessibility Requirement
• Composition
• Props
  • ProgressOptions
  • ProgressStateProps

Usage

import * as React from "react";

import { Progress, useProgressState } from "@adaptui/react";

export const ProgressBasic = props => {
  const state = useProgressState({ value: 50, ...props });
  const { percent, isIndeterminate } = state;

  return (
    <div className="progress">
      <Progress
        state={state}
        aria-label="progress"
        style={{ width: `${percent}%` }}
        className={`progressbar ${isIndeterminate ? "indeterminate" : ""}`}
      />
    </div>
  );
};

export default ProgressBasic;

Other Examples

Accessibility Requirement

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

Composition

• Progress uses Role
• useProgressState uses its own state

Props

ProgressOptions

Name	Type	Description
state	ProgressState	Object returned by the useProgressState hook.

ProgressStateProps

Name	Type	Description
value	number | null	The value of the progress indicator.If null the progress bar will be in indeterminate state
min	number	The minimum value of the progress
max	number	The maximum value of the