# @spectrum-web-components/progress-circle > An `` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent both determinate and indeterminate progress, helping users understand the status of ongoing operations Latest version **1.12.5** (published 2026-10-14) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @spectrum-web-components/progress-circle pnpm add @spectrum-web-components/progress-circle yarn add @spectrum-web-components/progress-circle bun add @spectrum-web-components/progress-circle ``` ## Health **Score 55/100 (C)** — status: active. Positive: no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; no types; no esm support. ## Facts | | | |---|---| | Version | 1.12.5 | | Published | 2026-10-14 | | First published | 2021-02-02 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1576 | | Author | Adobe | | Maintainers | caseyisonit, taratadobe, rajrock38, jnjosh, nikkimk, rubenc, jianliao79, pvashish, patrickfulton | | Keywords | design-system, spectrum, adobe, adobe-spectrum, web components, web-components, lit-element, lit-html, component, css | ## Links - npm: https://www.npmjs.com/package/@spectrum-web-components/progress-circle - Repository: https://github.com/adobe/spectrum-web-components - Homepage: https://opensource.adobe.com/spectrum-web-components/components/progress-circle - Issues: https://github.com/adobe/spectrum-web-components/issues - npm.io page: https://npm.io/package/@spectrum-web-components/progress-circle ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 1.12.5 (latest) — 2026-10-14 - 1.12.3-next.20260903033550 (next) — 2026-09-03 - 1.12.3-snapshot-test.20260831180357 (snapshot-test) — 2026-08-31 - 1.12.3-test.20260827122947 (test) — 2026-08-27 - 1.12.0-snapshot.20260422090428 (snapshot) — 2026-04-22 - 1.12.0-snaphot-test.20260223152537 (snaphot-test) — 2026-02-23 - 1.12.0-testing.20260223092154 (testing) — 2026-02-23 - 1.11.0-preview-ae61361d.20251203202755 (preview) — 2025-12-03 - 1.9.1-nightly.20251101120150 (nightly) — 2025-11-01 - 1.6.1-beta.0 (beta) — 2025-05-05 - 0.0.0-20250410163257 (calendar) — 2025-04-10 - 1.0.1-color-testing (color-testing) — 2024-12-09 - 1.0.0-rc.10 (rc) — 2024-10-30 - 1.12.4 — 2026-09-29 - 1.12.3-next.20260901142734 — 2026-09-01 - … 402 more at https://npm.io/package/@spectrum-web-components/progress-circle/versions ## README ## Overview An `` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent both determinate and indeterminate progress, helping users understand the status of ongoing operations. ### Usage [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/progress-circle?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/progress-circle) [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/progress-circle?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/progress-circle) [![Try it on Stackblitz](https://img.shields.io/badge/Try%20it%20on-Stackblitz-blue?style=for-the-badge)](https://stackblitz.com/edit/vitejs-vite-xx1plot6) ``` yarn add @spectrum-web-components/progress-circle ``` Import the side effectful registration of `` via: ``` import '@spectrum-web-components/progress-circle/sp-progress-circle.js'; ``` When looking to leverage the `ProgressCircle` base class as a type and/or for extension purposes, do so via: ``` import { ProgressCircle } from '@spectrum-web-components/progress-circle'; ``` ### Anatomy A progress circle consists of several key parts: - A label (via `slot="label"`) - A progress value (via `progress` attribute) - An optional indeterminate state (via `indeterminate` attribute) ```html ``` ### Options #### Sizes Progress circles come in three sizes to fit various contexts: Small ```html demo ``` Medium ```html demo ``` Large ```html demo ``` #### Static Colors When displaying over images or colored backgrounds, use the `static-color` attribute for better contrast: ```html demo
``` #### Indeterminate Progress Use indeterminate progress when the duration cannot be calculated: ```html demo ``` ### Accessibility The `` element implements several accessibility features: 1. **ARIA Role**: Automatically sets `role="progressbar"` for proper semantic meaning 2. **Labeling**: - Uses the `label` attribute value as `aria-label` - When determinate, adds `aria-valuenow` with the current progress - Includes `aria-valuemin="0"` and `aria-valuemax="100"` for the progress range 3. **Status Communication**: - Screen readers announce progress updates - Indeterminate state is properly conveyed to assistive technologies #### Best Practices - Always provide a descriptive `label` that explains what the progress represents - Use determinate progress when possible to give users a clear sense of completion - For determinate progress, ensure the `progress` value accurately reflects the actual progress - Consider using size="l" for primary loading states to improve visibility - Ensure sufficient color contrast when using `static-color="white"` ```html ``` --- _Source: https://npm.io/package/@spectrum-web-components/progress-circle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._