<h2>What’s new in v3</h2>
<ul>
<li><strong>Design tokens</strong>: Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Use a loading indicator to show that the system is working on a task and the user needs to wait.</p>
<p>Use this component to:</p>
<ul>
<li>Communicate that content or data is being retrieved or processed.</li>
<li>Prevent confusion when an action takes longer than expected.</li>
<li>Use a loading indicator if the expected wait time exceeds three seconds.</li>
<li>Provide feedback during transitions where the result isn’t immediate.</li>
</ul>
<p>Loading indicator, progress bar, and progress tracker are different components. Using the correct one makes interactions clearer and more predictable for all users, including those using assistive technologies.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Loading indicator</td>
<td>A visual animation that shows the system is processing or loading. It does not communicate how long the activity will take.</td>
</tr>
<tr>
<td>Progress bar</td>
<td>A visual or quantitative indicator that shows how long a system process will take. Do not use this component for loading or submission events that take less than five seconds.</td>
</tr>
<tr>
<td>Progress tracker</td>
<td>A visual or quantitative tracker that shows the user’s current step in a multistep process and the status of each step. Use this when the user initiates the progress.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>Loading indicator consists of up to three elements.</p>
<details data-name='image-block' data-images='[{"alt":"The parts of a loading indicator component, labeled 1 through 3.","caption":"1. **Animated spinner:** A spinning animation that moves along the circuit, shown as a quarter circle.\n2. **Circuit ring:** The circular track that defines the spinner’s movement path clockwise.\n3. **Label (optional):** Text that describes the action. It is recommended to limit the label to one word.","url":"https://dds.dell.com/site/v3/components/loading-indicator/loading-indicator-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details><h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/animation-purpose-ux/","type":"External"},"title":"Animation in UX article","description":"Read the Nielsen Norman Group&#39;s article on animation purpose.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/progress-indicators/","type":"External"},"title":"Progress indicators article","description":"Read the Nielsen Norman Group&#39;s article on loading indicator.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"View Chat Toolkit (Restricted)","path":"https://dell.sharepoint.com/sites/AIDesignCoE/SitePages/AI-Chat-Toolkit.aspx","type":"External"},"title":"AI Chat Toolkit","description":"Enhance AI chatbot interaction, ensuring a seamless experience from welcome message to \"End Chat\".","icon":"sparkles"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Use a loading indicator to show that the system is working on the user’s request when progress isn’t immediately visible, and when you don’t need to communicate how long the activity will take.

The loading animation uses a spinner that rotates clockwise in a continuous loop. Pairing the animation with text can improve clarity.

### Global

Use a loading indicator when loading a new page or performing a global action. If the page content is still visible behind the indicator, pair it with an overlay to prevent users from interacting with on‑page elements.

<details data-name='image-block' data-images='[{"alt":"Loading indicator shown on top of a full-page overlay.","caption":"A loading indicator centered on a page with an overlay.","url":"https://dds.dell.com/site/v3/components/loading-indicator/loading-indicator-usage-global.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Contextual

Contextual loading indicators provide feedback that a specific element or in‑page experience is responding to user action, such as pressing a button or loading table data.

This style differs from the global type: the indicator sits inside its parent component, and overlays aren’t used for contextual interactions. The component containing the indicator should not resize or distort to fit the spinner or label.

Use a loading indicator inside a button to show that the system is processing the user’s action. Replace the button’s label with the loading indicator to prevent users from clicking twice. Once the action completes, return the button to its rest state or show a success message if the action cannot be repeated. Always provide clear confirmation when the action finishes.

<details data-name='image-block' data-images='[{"alt":"Image showing loading indicator used to replace a button component after the button is pressed.","caption":"Buttons transitioning from default to loading and completed states.","url":"https://dds.dell.com/site/v3/components/loading-indicator/loading-indicator-usage-contextual.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

- - -

## Kinds

### Options

Loading indicators support two optional modifiers:

* **With label**: The label can appear on the left, right, top, or bottom of the spinner. Bottom is the default placement.
* **Without label**: Use this version only in contextual experiences where space is limited, such as small cards or buttons. Provide a label whenever possible.

<details data-name='image-block' data-images='[{"alt":"Loading indicator with label","caption":"Loading indicator with a label.","url":"https://dds.dell.com/site/v3/components/loading-indicator/loading-indicator-kinds-label.png"},{"alt":"Loading indicator without label","caption":"Loading indicator without a label.","url":"https://dds.dell.com/site/v3/components/loading-indicator/loading-indicator-kinds-nolabel.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Sizes

Loading indicators come in four sizes: extra large, large, medium, and small. Choose a size based on the experience or the component where the indicator appears.

Do not stack load indicators or place them in close proximity to each other.

<details data-name='image-block' data-images='[{"alt":"The 4 sizes of loading indicator.","caption":"Loading indicators shown in extra‑large, large, medium, and small sizes.","url":"https://dds.dell.com/site/v3/components/loading-indicator/loading-indicator-sizes.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| Size                  | Use case                                                                                                                         |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| Extra large (default) | The default size for global or page‑wide use across all viewports.                                                               |
| Large                 | Intended for larger in‑page components and experiences, such as tables or filters. Can be paired with an embedded form or table. |
| Medium                | Works with most components and fits well inside large buttons.                                                                   |
| Small                 | Best for compact spaces, such as medium and small buttons.                                                                       |

## Layout

### Alignment

The loading indicator supports five label positions: left, top, right, bottom, or no label.

<details data-name='image-block' data-images='[{"alt":"Label position options shown.","caption":"Label position options shown.","url":"https://dds.dell.com/site/v3/components/loading-indicator/loading-indicator-layout.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interaction

### Animation

Animation in the loading indicator consists of a spinner that rotates clockwise around the circle ring. The spinner is displayed as a quarter circle that sits on top of the circle ring but does not grow to show progress. This component includes [animation for prototyping in Figma](https://www.figma.com/proto/iyaDA9ZXWBDTWX2n5FrDG1/Loading-Indicator?page-id=826%3A24131&node-id=1351%3A25849&viewport=280%2C48%2C1.35&scaling=min-zoom&starting-point-node-id=1351%3A25849&show-proto-sidebar=1).

## Standards

### Accessibility

#### Ensure each loading indicator meets the appropriate level of contrast

Both the label and animation must meet a contrast ratio of 3:1 or greater with the page background. Consider increasing available contrast when possible.

WCAG 2.2: [1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum), [1.4.11 Non-text Contrast (w3.org)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast)

#### Use the top placement when loading a large area or full page of content

Including a label gives all users the clearest indication of what’s happening. As users typically read from top to bottom and left to right, placing the label on top means that the text explanation is the first thing they see,

#### If the same loading functionality occurs on a different page or screen in an application or set of pages, it should be identified with the same language

This reduces the cognitive load for people with cognitive difficulties.

WCAG 2.2: [3.2.4 Consistent Identification](https://www.w3.org/WAI/WCAG22/Understanding/consistent-identification)

### Content

#### Use a clear and concise label

The loading indicator’s label should be short, meaningful, and accurate to the pending action. Avoid using jargons. Technical language should be similarly avoided unless it’s absolutely critical to the understanding of the intended audience.

**Do:** Loading\
**Don’t:** Page loading

Design

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                               | Collection | CSS var                                         | Preview  |
| ---------------------------------- | ---------- | ----------------------------------------------- | -------- |
| spacing/xs                         | Semantic   | `var(--dds-spacing-xs)`                         | \-       |
| spacing/2xl                        | Semantic   | `var(--dds-spacing-2xl)`                        | \-       |
| border/radius/xs                   | Semantic   | `var(--dds-border-radius-xs)`                   | \-       |
| loading/size/sm                    | Component  | `var(--dds-loading-size-sm)`                    | \-       |
| color/background/SURFACE/secondary | Semantic   | `var(--dds-color-background-surface-secondary)` | \#EBF1F6 |
| color/background/BRAND/base-rest   | Semantic   | `var(--dds-color-background-brand-base-rest)`   | \#0672CB |
| card/gap                           | Component  | `var(--dds-card-gap)`                           | \-       |
| card/padding                       | Component  | `var(--dds-card-padding)`                       | \-       |
| color/background/SURFACE/neutral   | Semantic   | `var(--dds-color-background-surface-neutral)`   | \#FFFFFF |
| color/text/secondary               | Semantic   | `var(--dds-color-text-secondary)`               | \#293B4D |
| spacing/sm                         | Semantic   | `var(--dds-spacing-sm)`                         | \-       |
| loading/size/md                    | Component  | `var(--dds-loading-size-md)`                    | \-       |
| spacing/md                         | Semantic   | `var(--dds-spacing-md)`                         | \-       |
| loading/size/lg                    | Component  | `var(--dds-loading-size-lg)`                    | \-       |
| spacing/lg                         | Semantic   | `var(--dds-spacing-lg)`                         | \-       |
| loading/size/xl                    | Component  | `var(--dds-loading-size-xl)`                    | \-       |


To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-loading-indicator--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-loading-indicator--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-loading-indicator--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-loading-indicator--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-loading-indicator--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-loading-indicator--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

A loading indicator uses an animation to show processing, but it does not reveal how long the task will take.

Loading Indicator