> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/spinner.md).

# Loading Spinner

The Avonni Loading Spinner displays an animated indicator that tells users a process is running in the background. Drop it onto the canvas while data is loading, a record is saving, or any other task is in progress so users know to wait rather than assuming the page is stuck.

## Overview

The Loading Spinner is intentionally simple: it shows a spinning animation, sized and styled to match its surroundings. Because it has no data source of its own, configuration is quick — you mostly choose how big it should be, which color treatment fits its background, and what screen readers should announce. The sections below follow the configuration panel from top to bottom, so you can read along as you build.

## Configuration

To configure the Loading Spinner, select it on the canvas. The **Edit Loading Spinner** panel opens on the right with three tabs: **Properties**, **Interactions**, and **Style**. The sections below mirror the Properties tab.

### Properties

The Properties tab contains all of the spinner's settings in a single group.

#### Size

The **Size** setting controls how large the spinner appears. Choose the option that best fits the space the spinner sits in — a small inline area or a full panel:

* **Xxs** — the smallest spinner, for tight inline spaces.
* **Xs** — slightly larger than Xxs.
* **Small** — a compact spinner for minor loading areas.
* **Medium** (default) — the standard size, suitable for most situations.
* **Large** — the most prominent spinner, for full-page or full-panel loading states.

#### Variant

The **Variant** setting changes the spinner's color treatment so it stays visible against its background. Pick the option that contrasts best with the area behind it:

* **Base** (default) — the standard appearance, suited to light backgrounds.
* **Brand** — uses your brand color for the spinner.
* **Inverse** — a light spinner designed to stand out against dark backgrounds.

#### Alternative Text

The **Alternative Text** setting lets you provide a short description of what the spinner represents. Assistive technologies, such as screen readers, announce this text so that users who can't see the animation still understand that something is loading.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/spinner.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.