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.