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, 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.

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. 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 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:

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