Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@react-md/progress

mlaursen4.8kMIT5.1.6TypeScript support: included

Create horizontal, vertical, and circular progress indicators

react-md, material design, react, progress, component, components

readme

@react-md/progress

Create accessible horizontal or vertical progress bars or circular progress indicators that can either be deterministic or indeterministic.

Installation

npm install --save @react-md/progress

It is also recommended to install the following packages for updating the progress theme or transitions:

npm install --save @react-md/theme \
  @react-md/transition \
  @react-md/utils

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

The majority of the time you'll be using the progress components to track some long running task or initial page loading. For accessibility, you'll need to add an id to the progress component as well as updating the main loading area to have aria-buys="true" and aria-describedby="PROGRESS_ID":

import { render } from "react-dom";
import { CircularProgress, LinearProgress } from "@react-md/progress";
import { Typography } from "@react-md/typography";
import { useToggle } from "@react-md/utils";

const App = () => {
  const [loadingCircle, , stopLoadingCircle] = useToggle(true);
  const [loadingLinear, , stopLoadingLinear] = useToggle(true);

  useEffect(() => {
    let circleTimeout = window.setTimeout(() => {
      stopLoadingCircle();
      circleTimeout = undefined;
    }, 5000);

    let linearTimeout = window.setTimeout(() => {
      stopLoadingLinear();
      linearTimeout = undefined;
    }, 8000);

    return () => {
      window.clearTimeout(circleTimeout);
      window.clearTimeout(linearTimeout);
    };
  }, []);

  return (
    <>
      <div
        id="circle-content"
        aria-busy={loadingCircle || undefined}
        aria-describedby={loadingCircle ? "circular-progress" : undefined}
      >
        {loadingCircle && <CircularProgress id="circular-progress" />}
        {!loadingCircle && (
          <Typography type="headline-2">Hello from circle div</Typography>
        )}
      </div>
      <div
        id="linear-content"
        aria-busy={loadingLinear || undefined}
        aria-describedby={loadingCircle ? "circular-progress" : undefined}
      >
        {loadingLinear && <CircularProgress id="linear-progress" />}
        {!loadingLinear && (
          <Typography type="headline-2">Hello from linear div</Typography>
        )}
      </div>
    </>
  );
};

render(<App />, document.getElementById("root"));

changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

5.1.6 (2023-12-11)

Note: Version bump only for package @react-md/progress

5.1.3 (2022-05-07)

Documentation

  • fix typos throughout codebase (725d1a2)

Other Internal Changes

  • typos: fix additional typos throughout repo (ef20132)

5.1.2 (2022-04-02)

Note: Version bump only for package @react-md/progress

5.1.0 (2022-03-18)

Other Internal Changes

  • run lint-scripts --fix for consistent-type-imports (42d839d)

5.0.0 (2022-01-31)

Note: Version bump only for package @react-md/progress

4.0.3 (2021-12-31)

Other Internal Changes

  • Updated all packages' peerDependenciesMeta (60fcd71), closes #1319

4.0.1 (2021-11-27)

Bug Fixes

  • @react-md/utils: Update getPercentage to optionally not throw errors (ff8a1d6)

Other Internal Changes

  • Updated imports to use import type when possible (ba96bb6)

4.0.0 (2021-11-24)

Features

  • Update to use new JSX Transform and latest eslint (8111cd3)
  • @react-md/typography: Renamed Text to Typography (30cf056)

Other Internal Changes

  • always skip lib check (229cef1)
  • react-md: Remove prop-types package and usage (2637a6f)

Breaking Changes

  • Minimum React version is now 16.14 instead of 16.8
  • @react-md/typography: The Text component has been renamed to Typography to help with auto-imports conflicting with the Text element that exists in lib.d.ts
  • react-md: There will no longer be run-time prop validation with the prop-types package.

3.1.0 (2021-09-10)

Other Internal Changes

  • ran yarn format to include new files (48d3d7f)

3.0.1 (2021-08-15)

Bug Fixes

  • Updated peerDependencies to fix yarn berry peer requirements (250efcd), closes #1224

3.0.0 (2021-08-13)

Bug Fixes

  • sass: use math.div instead of division since it's deprecated (d8c3f12)

2.9.1 (2021-07-27)

Other Internal Changes

  • install: slighly reduce install size by excluding tests in publish (9d01a44)

2.9.0 (2021-07-18)

Note: Version bump only for package @react-md/progress

2.8.5 (2021-07-03)

Note: Version bump only for package @react-md/progress

2.8.4 (2021-06-10)

Note: Version bump only for package @react-md/progress

2.8.3 (2021-05-18)

Documentation

  • react-md.dev: updated tsdoc to work with typedoc (cf54c35)

2.8.2 (2021-04-23)

Note: Version bump only for package @react-md/progress

2.8.0 (2021-04-22)

Other Internal Changes

  • tsconfig: separate tsconfig by package instead of a single root (b278230)

2.7.1 (2021-03-23)

Note: Version bump only for package @react-md/progress

2.7.0 (2021-02-28)

Documentation

  • tsdoc: fixed remaining tsdoc syntax warnings (946f4dd)
  • tsdoc: fixed some tsdoc annotations and styling (0449b86)
  • tsdoc: updated @since annotations (c62027e)

Other Internal Changes

  • updated test coverage to not include conditional component PropTypes (24e5df1)

2.6.0 (2021-02-13)

Note: Version bump only for package @react-md/progress

2.5.5 (2021-01-30)

Note: Version bump only for package @react-md/progress

2.5.4 (2021-01-27)

Note: Version bump only for package @react-md/progress

2.5.0 (2020-12-15)

Note: Version bump only for package @react-md/progress

2.4.2 (2020-10-23)

Note: Version bump only for package @react-md/progress

2.4.1 (2020-10-17)

Note: Version bump only for package @react-md/progress

2.4.0 (2020-10-17)

Features

2.3.1 (2020-09-15)

Note: Version bump only for package @react-md/progress

2.3.0 (2020-09-10)

Features

2.2.2 (2020-09-02)

Note: Version bump only for package @react-md/progress

2.2.1 (2020-09-02)

Note: Version bump only for package @react-md/progress

2.2.0 (2020-08-11)

Note: Version bump only for package @react-md/progress

2.1.2 (2020-08-01)

Note: Version bump only for package @react-md/progress

2.1.1 (2020-07-21)

Note: Version bump only for package @react-md/progress

2.1.0 (2020-07-12)

Note: Version bump only for package @react-md/progress

2.0.2 (2020-06-30)

Bug Fixes

  • LICENSE: Removed the time range from license since it was incorrect (50c9021)
  • Added sideEffects field to package.json (31820b9)
  • sideEffects formatting (78a7b6b)

v2.0.1

No changes.

v2.0.0

The progress package probably went through the least amount of changes for the v2 release. The main changes involved were switching to <span>s instead of <div>s so they can be rendered within buttons and a few API changes to hopefully be easier to work with.

New Features / Behavior

  • new theme variables and mixins to dynamically change the color and size of the progress bars
  • introduced a new util getProgressA11y that can be used to link a progress bar to another element that is loading
  • the LinearProgress bar can now also be rendered vertically instead of horizontal only
  • the CircularProgress's size is now configurable with CSS instead of a scale prop

Breaking Changes

  • dropped support for the progressStyle function but might be added back later
  • dropped support for updating the CircularProgress's size with component props since it's easier to style in CSS now

New SCSS Variables, Functions, and Mixins

  • $rmd-progress-color: $rmd-theme-primary !default - A new variable to configure the progress color
  • $rmd-progress-background-color: rmd-theme-get-swatch($rmd-theme-primary, 300, false, rgba($rmd-theme-primary, 0.4), rmd-progress-background-color) !default - The background color to use for the incomplete progress part of the linear progress bar
  • $rmd-linear-progress-styles - A Map that gets converted into the linear progress animation
  • $rmd-linear-progress-short-styles - A Map that gets converted into the linear progress shorter animation
  • $rmd-linear-progress-reverse-styles - A Map that gets converted into the reversed linear progress animation
  • $rmd-linear-progress-reverse-short-styles - A Map that gets converted into the reversed linear progress shorter animation
  • $rmd-linear-progress-vertical-styles - A Map that gets converted into the vertical linear progress animation
  • $rmd-linear-progress-vertical-short-styles - A Map that gets converted into the vertical linear progress shorter animation
  • $rmd-linear-progress-vertical-reverse-styles - A Map that gets converted into the vertical reversed linear progress animation
  • $rmd-linear-progress-vertical-reverse-short-styles - A Map that gets converted into the vertical reversed linear progress shorter animation
  • $rmd-circular-progress-size: 3rem !default - The default size for the circular progress. This is doubled the default size in v1.
  • $rmd-circular-progress-stroke-width: 6 !default - The stroke width for the circular progress SVG that used to be a prop
  • $rmd-circular-progress-start-offset: $rmd-circular-progress-dasharray !default - The starting dashoffset for the circular progress animation
  • $rmd-circular-progress-end-offset: $rmd-circular-progress-dasharray / 4 !default - The ending dashoffset for the circular progress animation
  • $rmd-circular-progress-rotate-styles - A Map that gets converted into the circular progress rotation animation
  • $rmd-cicular-progress-dash-styles - A Map that gets converted into the circular progress stroke-dashoffset animation while rotating
  • @function rmd-progress-theme - gets one of the theme values and validates that the theme name is valid
  • @function rmd-progress-theme-var - gets one of the theme values as a css variable with a fallback value and validates that the theme name is valid
  • @mixin rmd-progress-theme - applies one of the theme values to a css property as a css variable
  • @mixin rmd-progress-theme-update-var - updates one of the theme values as a css variable

Renamed SCSS Variables, Functions, and Mixins

  • renamed $md-progress-include-linear to $rmd-progress-include-linear
  • renamed $md-progress-include-circular to $rmd-progress-include-circular
  • renamed $md-linear-progress-height to $rmd-linear-progress-size and changed the default value from 3px to 0.25rem
  • renamed $md-progress-duration to $rmd-linear-progress-transition-duration and $rmd-circular-progress-transition-duration to allow the transitions to be separate times if desired. Kept the same default value of 2.4s
  • renamed $md-linear-progress-delay to $rmd-linear-progress-short-animation-delay and changed the default value from 1.15s to 0.75s
  • renamed $md-circular-progress-stroke-dasharray to $rmd-cirular-progress-dasharray and changed the default value from 187px to 187

Removed SCSS Variables and Mixins

  • removed $md-linear-progress-swatch and $md-linear-progress-fallback-color since they are no longer used and already has sensible defaults with the new rmd-theme-get-swatch function
  • removed $md-progress-margin since margin is no longer automatically applied to the progress components
  • removed the @mixin react-md-theme-progress-circular, @mixin react-md-theme-progress-linear, and @mixin react-md-theme-progress since there is a new theming API