# Spinner

> Style the loading spinner: icon, message, layout, typography and backdrop. (Pro)

Source: https://arraystory.com/docs/ajaxpress/spinner/

The spinner is a centred loading icon, with an optional message, shown over a light overlay while the next page loads. It makes waiting obvious, which suits pages that take a moment. The free plugin shows it in a default style. With [AjaxPress Pro](https://arraystory.com/docs/ajaxpress/ajaxpress-pro/), you can style every part of it.

Go to **Settings → AjaxPress → Animations**, and choose **Spinner** under **Select Loader**. Its settings appear below, and the preview on the right updates as you change them.

![Show a spinner, with your own message, while the next page loads.](https://r2.arraystory.com/docs/ajaxpress/spinner.mp4?v=0da1b2aac7)

## Layout & Content

- **Layout**: where the icon sits relative to the message. Icon only, icon left, icon right, icon above, icon below, or text only.
- **Spinner Icon**: pick one of the nine built-in animated icons.
- **Loading Message**: the text beside the icon, such as "Loading…". It's hidden in the **Icon only** layout. Leave it empty to show no text.

## Icon Settings

| Setting | What it does | Default |
| --- | --- | --- |
| **Image Size** | The icon's width, in pixels | 40 |
| **Image Rotation** | Turns the icon by a fixed angle, from −360° to 360° | 0 |
| **Gap Between Icon & Text** | Space between the icon and the message, in pixels | 10 |

## Typography

**Font Family** (your system font, or a common web font such as Roboto, Open Sans, Lato, Montserrat or Poppins), **Font Weight**, **Font Size** and **Letter Spacing** of the message.

A web font only shows if your site already loads it. Otherwise the browser uses a similar font.

## Backdrop

- **Text Color**: the message colour.
- **Background Color**: the overlay behind the spinner.
- **Background Transparency**: how solid the overlay is. 100% hides the page completely while loading; lower values let it show through.

## Good to know

- **The overlay covers the whole screen** while a page loads, including a [persistent player](https://arraystory.com/docs/ajaxpress/keep-audio-or-video-playing-across-pages/). Clicks wait until the new page is on screen. Keep the backdrop fairly see-through if listeners might reach for the pause button.
- **It only shows for as long as loading takes.** On a fast site it may just flash. If that feels jumpy, the [progress bar](https://arraystory.com/docs/ajaxpress/progress-bar/) is the calmer choice.

## Custom CSS

The spinner's parts have these classes: `.ajaxpress-spinner` (the whole thing), `.ajaxpress-spinner-overlay`, `.ajaxpress-spinner-content`, `.ajaxpress-spinner-image` and `.ajaxpress-spinner-text`. For example, a blurred backdrop:

```css
.ajaxpress-spinner-overlay {
  backdrop-filter: blur(3px);
}
```