<h2>When to use</h2>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Loading indicator</td>
<td>A visual animation used to convey processing or loading. It does not indicate how long the activity will take to complete.</td>
</tr>
<tr>
<td><a href="/components/progress-bar/">Progress bar</a></td>
<td>Progress indicator provides visual or quantitative feedback to users regarding how long a system will take to complete a system process. This component is not intended for use during loading or submission events under five seconds.</td>
</tr>
<tr>
<td><a href="/components/progress-tracker/">Progress tracker</a></td>
<td>Progress trackers display the user’s location within a multistep process while providing the status of each step. In these cases, progress is user-initiated.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"The parts of a loading indicator component, labeled 1 through 3.","caption":"1. **Animated spinner**: spinning animation along the circuit, represented by a quarter of a circle.\n2. **Circuit ring**: circle that is used to set boundaries for the animated spinner to travel clockwise.\n3. **Label**: optional text to describe the action. It is recommended to limit the label to one word.","url":"https://dds.dell.com/site/stage/1a/82/Loading_Indicator_Anatomy_1_43a51dd511.png"}]' data-numberofcolumns='1'></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'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Use a loading indicator to communicate that the system is working on the user’s request when the progress isn’t otherwise detectable, and when it’s not necessary to indicate specifically how long an activity will take. 

Animation in the loading indicator consists of a spinner that rotates clockwise indefinitely around the circle ring. Combining text with the animation can improve visual understanding.

### Global

Use a loading indicator when loading a new page or when committing a global action. If the on-page content is visible behind the loading indicator, pair it with an [overlay](/components/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":"","url":"https://dds.dell.com/site/stage/ec/16/Loading_Indicator_Usage_Global_372db89813.png"}]' data-numberofcolumns='1'></details>

### Contextual

Contextual loading indicators give visual feedback that an in-page experience or component is responding to user action, such as pressing a [button](/components/button/) or populating data sets within tables. 

The style varies visually from the global type in that a box is not required and an overlay is not intended for contextual use cases. 

Components housing the loading indicator do not flex or expand to accommodate the animation and optional label.

<details data-name='image-block' data-images='[{"alt":"Image showing loading indicator used to replace a button component after the button is pressed.","caption":"Use a loading indicator within a button to inform the user that the system is performing the intended action after a button is pressed. In addition to providing visual feedback, replacing the button with a loading indicator can prevent the user from unintentionally duplicating the action. Once the action is completed, the button should return to its rest state or change to an inactive state if the action cannot be taken twice. Additionally, provide immediate confirmation of the success or failure of the action once it’s completed.","url":"https://dds.dell.com/site/stage/e3/0e/Loading_Indicator_Usage_6a27a82e55.png"}]' data-numberofcolumns='1'></details>

## Kinds

### Options

Loading indicators include two optional modifiers: having a label and not having a label.

<details data-name='image-block' data-images='[{"alt":"Loading indicator with label","caption":"**With label:** the label can appear to the left, right, top, or bottom of the animation. Bottom is the default label placement.","url":"https://dds.dell.com/site/stage/8a/98/Loading_Indicator_Options_Label_15a6af954d.png"},{"alt":"Loading indicator without label","caption":"**Without label:** only intended for use in contextual experiences, such as small cards or buttons, where a label may not fit. It is recommended that you provide a label when possible.","url":"https://dds.dell.com/site/stage/43/85/Loading_Indicator_Options_No_Label_78de46864b.png"}]' data-numberofcolumns='2'></details>

## Sizes

Loading indicators come in extra-large, large, medium, and small sizes. Consider the experience or in-page area when selecting a size:

* Extra-large loading indicators are intended for global or page-wide use cases.
* Large loading indicators can pair with an embedded [form](/patterns/form/) or [table](/components/table/). 
* Medium loading indicators can be used with most components.
* Small is intended for compact spaces.

Do not stack loading indicators or combine them in close proximity with each other.

<details data-name='image-block' data-images='[{"alt":"The 4 sizes of loading indicator.","caption":"Loading indicator sizes in descending order: extra large, large, medium, and small.","url":"https://dds.dell.com/site/stage/e8/57/Loading_Indicator_Sizes_b6fd36d81a.png"}]' data-numberofcolumns='1'></details>

| Size                  | Use case                                                                                                                             |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| Extra large (default) | The default size of the loading indicator, used for global or page-wide use cases in all viewports.                                  |
| Large                 | The large size is intended to show loading or feedback within larger, in-page components and experiences, such as tables or filters. |
| Medium                | The medium size can be used with most components and within large buttons.                                                           |
| Small                 | It is recommended that you use the small size within compact spaces, such as medium and small buttons.                               |

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

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-loading-indicator--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-loading-indicator--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-loading-indicator--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-loading-indicator--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-loadingindicator--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-loadingindicator--docs&viewMode=docs&websiteFrame=true'></details>

A loading indicator is a visual animation used to convey processing or loading, but does not indicate how long the activity will take to complete.

Loading Indicator

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
