Design Guidelines

Introduction |  Notifications |  Grids |  Colours |  Typography |  Image Sizes |  Padding and Spacing |  Modals |  Icons |  Social Norms |  Dividers
Tables |  Package Selector |  Timelines |  Progress Indicator |  CTAs and Buttons |  Forms |  Tooltips |  Accordions |  Loaders | 

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




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.



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.