Activity indicator (‘Dotty’)

Dotty is used as a visual indicator to let the user know that something is taking place. This could include loading a video, retrieving information from a database or checking the status of a service.

To enable Dotty to stand out, the animation is placed on a background of a white or black tint. The preferred option is full colour Dotty on a white background, rather than the white version on black. The background opacity is set to 70% so the user can see the animation in the context of the page.

Background overlay options

Positioning

For a page-level activity, centre Dotty in the viewport. If an individual component is refreshing or updating, centre Dotty in place of the component.

Sizing

On 768, 960 and 1200 breakpoints, the width for Dotty is 90px.

Padding around Dotty

The padding around the Dotty allows space for the animation.

For the 768, 960 and 1200 breakpoints the padding is 30px.

For the 320 and 600 breakpoints the padding is 20px.