> ## 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.

# Page loader

> Page loaders can be used as full page loaders, covering the entire page while content is loading.

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

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

## When to use

* When loading entire pages or the primary content area after a navigation action.
* When the content load time is noticeable (typically > 1s) and might cause uncertainty without visual feedback.
* During transitions between major sections of the product where the context completely changes, such as navigating to a new application or page.

## When to use something else

* For small, localized loads in [Menu](/cdf/aura/primitives/dropdown-menu), [Button](/cdf/aura/primitives/button), [Card](/cdf/aura/primitives/card), [Data grid](/cdf/aura/primitives/data-grid) cells, or inline lists: use [Skeleton](/cdf/aura/primitives/skeleton) or inline spinner patterns instead.
* For background work while the user keeps working: use [Progress](/cdf/aura/primitives/progress) or a subtle inline status indicator.
* For imperceptibly fast loads (\< \~1s): skip the loader to avoid flicker.
* For long loads (> \~4s): prefer [Progress](/cdf/aura/primitives/progress) or explicit completion messaging.

## Dos and don'ts

* **Do** use a Page loader for full page loads, with the overlay background behind.
* **Do** center align the Page loader both vertically and horizontally in the content area.
* **Don't** use a Page loader inside components or small containers. Use a [Skeleton](/cdf/aura/primitives/skeleton) or spinner instead.
* **Don't** use a title and description in the Page loader if the loader will not be displayed long enough for users to read the message.
* **Don't** put vital information in the title or description of a Page loader.
* **Don't** change any existing styling of the Page loader, such as color, animation, or speed — this is a branded element.
* **Don't** alter the size or placement within the main page area.

## Behavior

* Covers the targeted region (full page or main pane) until loading finishes; should not steal focus unless paired with a cancelable operation that needs attention.

## Often used with

Full-page or pane skeleton UI; for indeterminate waits pair messaging with [Progress](/cdf/aura/primitives/progress) when a % or cancel is available.

## Accessibility

* **Announce loading state:** Use `role="status"` or `aria-live="polite"` so assistive technology announces that content is loading without interrupting the user's current focus.
* **Keep optional text readable:** If you include a title or description, keep it short and non-critical — users may not have time to read it before the loader dismisses.
* **Don't trap focus:** The Page loader should not move keyboard focus unless the operation is cancelable and requires an explicit action.

## 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.

### Sizes

Choose a loader size that matches the region it occupies—smaller spinners for inline areas, larger ones for full-page or pane-level loading.

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

### With color

Apply brand or semantic color when the loader must stand out against a specific background or align with a status theme.

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

### Inline with text

Pair the spinner with short status text so users know what is loading, not just that something is in progress.

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

### Page loader

Use the full-page variant after navigation or when the primary content area is replaced entirely until data is ready.

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