> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale.
> Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML.
> For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts/<version>/ and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript.
> Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md.
> For implementation work, also load /skill.md.

# Progress

> Shows how far through a task or process the user is. Use when completion is measurable and expressing it as a percentage or fraction is meaningful to the user.

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-progress--docs)

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-progress--default" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-progress--default&viewMode=story&globals=theme:light" title="Progress default story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

## When to use

* Multi-step flows where the user benefits from knowing how much is left (uploads, installations, form wizards).
* Long-running operations where a percentage or step count can be calculated.
* To indicate storage or data usage.

## When to use something else

* Unknown duration: use [Page loader](/cdf/aura/primitives/page-loader) / skeleton / shimmer patterns instead of a fake percentage.
* Very fast operations (under \~1s): skip the bar to avoid flicker.
* Decorative metrics: use charts or static labels, not a determinate progress bar.

## Dos and don'ts

* **Do** pair with a label that describes what's in progress — "Uploading files" is more useful than a bar alone.
* **Do** update the value in real time if possible; a static progress bar reads as broken.
* **Don't** reset to 0 and run again to imply ongoing activity — use [Page loader](/cdf/aura/primitives/page-loader) / indeterminate patterns for unknown completion.
* **Don't** use multiple progress bars in close proximity unless each clearly maps to a distinct parallel operation.

## Behavior

* If the operation can be canceled, provide a cancel action alongside the bar — not after it completes.
* Avoid showing a percentage if the underlying estimate is unreliable; or show a step indicator ("Step 2 of 4") instead.

## Often used with

Visible status label; optional cancel [Button](/cdf/aura/primitives/button); pairs with [File upload](/cdf/aura/primitives/file-upload) or long jobs.

## Visual examples

The examples below are interactive and follow the doc site's theming: light mode when the docs site is in light mode, and dark mode when you switch the docs site to dark mode.

### Small

Use the small progress bar in compact rows, cards, or toolbars where a full-width bar would dominate the layout.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-progress--small" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-progress--small&viewMode=story&globals=theme:light" title="Progress small story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Custom aria label

Provide a custom `aria-label` when the visible label alone does not fully describe what is progressing—for example, "Uploading 3 of 10 files."

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-progress--custom-aria-label" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-progress--custom-aria-label&viewMode=story&globals=theme:light" title="Progress custom aria label story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Composition default

Use the default composition when you need a labeled progress bar with percentage or status text for standard upload or processing flows.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-progress--composition-default" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-progress--composition-default&viewMode=story&globals=theme:light" title="Progress composition default story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Composition small

Use the small composition in dense lists or inline status rows where space is limited but progress still needs a readable label.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-progress--composition-small" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-progress--composition-small&viewMode=story&globals=theme:light" title="Progress composition small story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>