Overview

The FOS - Spinner Actions dynamic action plug-in is the perfect tool to deal with spinners and overlays. With support for various spinner icons, configurable display locations, overlays with the colour of your choice - it's never been easier to create nice loading screens.

Examples

Add and Remove

You can add and remove a spinner using the "Show Spinner" and "Remove Spinner" actions. The positioning of the spinner is controlled by the element you will overlay e.g. a particular region or the whole page. You will specify the particular region using the "Affected Elements" attribute or leave it blank to apply it to the whole page.

Note: calling the "Show Spinner" action multiple times on the same element, without removing it first will not not stack the spinners on top of each other i.e. the plug-in makes sure that every element has maximum one instance.

With or without overlay

By setting the "Overlay" attribute to "On Element", the overlay will cover only the element specified in the "Affected Element" attribute. Setting it to "On Page", the whole viewport will be covered and the ability to scroll the page will be disabled.

Click on one of the buttons below to display a spinner with overlay on the region/page. Note: the spinner will be automatically removed after 3 seconds.

Note: you can use the "Overlay Color" and the "Overlay Opacity" attributes to adjust the display.

Spinner Types

Through the Spinner Type attribute, there are two ways to implement custom spinners in your application. Either choose one of the numerous predefined styles - Circle, Dual Ring, Ring, Ellipsis, Roller, Hourglass, Heart, Grid - or select the "Custom" option to add your own HTML and CSS. The predefined styles are based on loading.io/css.

Custom Spinner

Working with nested regions

Adding overlay to the affected region especially useful when it comes to more complex structures.

Design

You can preview the plug-in setup as you would see it in page designer. You can either do this by clicking this button in the top right corner of each example, or you can see all the examples together in the region below.

Looking at the examples you'll see just how easy the plug-in is to use. Don't worry about changing any values as they aren't saved. We actually encourage you to change them, so you can see the behaviour of the attributes and their help text.

FAQ

How to replace all spinners application wide?

Create a dynamic action on the Global Page (Page O) and run this plug-in on Page Load, with the "Action" attribute set to "Convert Default".

Breadcrumb