# @leafygreen-ui/progress-bar > LeafyGreen UI Kit Progress Bar Latest version **1.0.9** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @leafygreen-ui/progress-bar pnpm add @leafygreen-ui/progress-bar yarn add @leafygreen-ui/progress-bar bun add @leafygreen-ui/progress-bar ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 1.0.9 | | Published | 2026-10-02 | | First published | 2025-08-01 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 11 | | Unpacked size | 344.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 274 | | Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck | ## Links - npm: https://www.npmjs.com/package/@leafygreen-ui/progress-bar - Repository: https://github.com/mongodb/leafygreen-ui - Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/progress-bar - Issues: https://jira.mongodb.org/projects/LG/summary - npm.io page: https://npm.io/package/@leafygreen-ui/progress-bar ## Dependencies (11) - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [polished](https://npm.io/package/polished.md) ^4.2.2 - [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1 - [@leafygreen-ui/a11y](https://npm.io/package/@leafygreen-ui/a11y.md) ^3.0.6 - [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.9.1 - [@leafygreen-ui/hooks](https://npm.io/package/@leafygreen-ui/hooks.md) ^9.3.2 - [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.3 - [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.1 - [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.3 - [@lg-tools/test-harnesses](https://npm.io/package/@lg-tools/test-harnesses.md) ^0.3.5 - [@leafygreen-ui/typography](https://npm.io/package/@leafygreen-ui/typography.md) ^22.2.5 ## Recent versions - 1.0.9 (latest) — 2026-10-02 - 1.0.8 — 2026-01-21 - 1.0.7 — 2025-11-24 - 1.0.6 — 2025-11-13 - 1.0.5 — 2025-10-31 - 1.0.4 — 2025-10-21 - 1.0.3 — 2025-09-25 - 1.0.2 — 2025-09-10 - 1.0.1 — 2025-08-04 - 1.0.0 — 2025-08-01 ## README # Progress Bar ![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/progress-bar.svg) #### [View on MongoDB.design](https://www.mongodb.design/component/progress-bar/live-example/) ## Description The `ProgressBar` component supports two types: - **Indeterminate** — shows an infinite looping animation to indicate ongoing activity without specifying exact progress. Useful when the duration or total work is unknown. - **Determinate** — shows measurable progress toward a known maximum. When using a determinate progress bar, specify whether you're using it as a: - **Meter** — a snapshot of current value, often with a health/status indication (e.g., disk space used). - **Progress bar** — a dynamic bar that fills as a task progresses toward completion (e.g., file upload). ## Installation ### PNPM ```shell pnpm add @leafygreen-ui/progress-bar ``` ### Yarn ```shell yarn add @leafygreen-ui/progress-bar ``` ### NPM ```shell npm install @leafygreen-ui/progress-bar ``` ## Example ### Determinate Bar With Progress Role (Default) ```js import ProgressBar from '@leafygreen-ui/progress-bar'; const [uploaded, setUploaded] = useState(0); const [paused, setPaused] = useState(false); const total = 100; `${value}/${maxValue} files` } showIcon value={uploaded} maxValue={total} />; ``` ### Determinate Bar With Meter Role ```js import ProgressBar from '@leafygreen-ui/progress-bar'; const [used, setUsed] = useState(96); const totalSpaceAvailable = 128; `${value}/${maxValue} GB used` } value={used} maxValue={totalSpaceAvailable} />; ``` ### Indeterminate Bar ```js import ProgressBar from '@leafygreen-ui/progress-bar'; ; ``` ## Properties | Prop | Type | Default | Applicable To | Description | | ------------------ | ---------------------------------------------------------------------------------------------- | --------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `size?` | `'small'` \| `'default'` \| `'large'` | | all | Optional size (thickness) of the progress bar. | | `description?` | `React.ReactNode \| Array` | | all | Optional descriptive text below the progress bar. If multiple items are provided in an array, they will be automatically rotated every 2000 milliseconds. Single items are returned as-is without rotation. | | `formatValue?` | `'number'` \| `'fraction'` \| `'percentage'` \| `(value: number, maxValue?: number) => string` | | all | Optional formatting of progress value text. If undefined, no progress value is displayed. | | `showIcon?` | `boolean` | `false` | all | When `true`, displays icon next to progress value. If `variant` is `'success'`, the icon only appears when progress reaches 100%. | | `variant?` | `'info'` \| `'success'` \| `'warning'` \| `'error'` | `'info'` | all | Optional variant of the progress bar. Defaults to `'info'`. | | `isIndeterminate?` | `boolean` | `false` | all | When `true`, shows an infinite looping animation along the bar instead of a specific width. **Only available for `info` and `success` variants**. | | `role?` | `'progressbar'` \| `'meter'` | `'progressbar'` | determinate only | If determinate, specify role of the progress bar ("progressbar" or "meter"). Defaults to "progressbar". | | `value` | `number` | | all | Current progress value. **Optional only if isIndeterminate is `true`.** | | `maxValue?` | `number` | | determinate only | If determinate, specify maximum progress value. | | `enableAnimation?` | `boolean` | `false` | determinate with role "progressbar" only | When `true`, enables shimmer animation for longer-running processes. **Only available for determinate bars with role "progressbar".** **Only available for `info` and `success` variants.** | | `disabled?` | `boolean` | `false` | determinate only | When `true`, shows a disabled style and pauses animation. | ## Test Harnesses ### `getTestUtils` `getTestUtils()` exposes helper functions to access inner elements of the `ProgressBar` component for testing. #### Single `ProgressBar` ```tsx import { getTestUtils } from '@leafygreen-ui/progress-bar/testing'; test('renders single progress bar', () => { // ...code to render a progress bar const { getBar } = getTestUtils(); expect(getBar()).toBeInTheDocument(); }); ``` #### Multiple `ProgressBar` components ```tsx import { getTestUtils } from '@leafygreen-ui/progress-bar/testing'; test('renders multiple progress bars', () => { // ...code to render multiple progress bars const utilsOne = getTestUtils('lg-progress_bar_1'); const utilsTwo = getTestUtils('lg-progress_bar_2'); expect(utilsOne.getBar()).toBeInTheDocument(); expect(utilsTwo.getBar()).toBeInTheDocument(); }); ``` ### Test Utils ```tsx const { getContainer, getBar, getBarFill, getBarTrack, queryIcon, queryLabel, queryDescription, queryValueText, } = getTestUtils(); ``` | Util | Description | Returns | | ------------------ | ------------------------------------------------------------------------------------------------------------------ | ------------------------ | | `getContainer` | Returns the root element containing the progress bar and all accompanying text. | `HTMLDivElement` | | `getBar` | Returns the progress bar element, which can have either `role="progressbar"` or `role="meter"` depending on usage. | `HTMLDivElement` | | `getBarFill` | Returns the fill element of the progress bar. | `HTMLDivElement` | | `getBarTrack` | Returns the track element of the progress bar. | `HTMLDivElement` | | `queryIcon` | Returns the icon element, if present. | `HTMLDivElement \| null` | | `queryLabel` | Returns the label element, if present. | `HTMLDivElement \| null` | | `queryDescription` | Returns the description element, if present. | `HTMLDivElement \| null` | | `queryValueText` | Returns the value text element, if present. | `HTMLDivElement \| null` | --- _Source: https://npm.io/package/@leafygreen-ui/progress-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._