Taxonomic name: A-LOADING-INDICATOR
Added on: v3.0.0 (15/09/17)
Updated on: v5.0.0 (05/10/20)

Loading indicator

Loading indicators are used when an action takes place that requires waiting time; they indicate to users that the page is still working while they are waiting for the action to complete.

Design and usage

Usage

Loading indicators should be used where the wait time is likely to be one to five seconds; if the wait time is likely to be longer than five seconds, it is recommended that the text within the indicator is updated periodically to show that the page is still working

Structure

The loading indicator graphic is made up of three circles and has two sizes (large and small)
The colours of the circles always start in the same configuration – Link Blue #004FB6, Abeille Assurances Yellow #FFD900 and Positive Green #3E812C this matches the Abeille Assurances logo
The coloured circles should only be used on white #FFF, Light Grey #EEE, Lightest Grey #F9F9F9 and Lightest Blue #E5EDf8
When used on dark accent colours all the loader circles change to white
When used on Abeille Assurances Yellow all the loader circles change to #5C596D

Large version

The size of the circles in the large loader are 20px and spaced 20px apart
The large loader is always centred in the page/overlay it is being used on
The large loader always has a loader title beneath the circles; this can be an H2 or an H3
You may also add body copy under the loader title, within that copy no hyperlinks can be used
Spacing between the loader title and circles is 15px
Spacing between the loader title and body copy is 15px
When used on an overlay the background is always 280px wide and white #FFF
The white background on overlay has a top padding of 50px, bottom padding of 40px and a left and right padding of 30px
Do not: Use the large version next to a component, only use on overlays or when waiting for large sections of content to appear

Small version

The size of the circles in the small loader are 10px and spaced 10px apart
The small loader is always left aligned to the component it's used with and has a spacing of 20px
If using next to a component that is full width the loader will wrap underneath. Caution: This is because as the loader appears and disappears, the page content below will jump up and down
Do not: Use the small version centred in the page, only for use in-line with form elements

Examples

Large

Interactive example

Code example

<div class="a-loading-indicator-container">
	<div class="a-loading-indicator" role="alert">
		<span class="a-loading-indicator__message">...</span>
	</div>
</div>

Large - with H2 title and optional copy

Interactive example

Code example

<div class="a-loading-indicator-container [ Modifiers ]">
	<div class="a-loading-indicator" role="alert">
		<div class="a-loading-indicator__message a-loading-indicator__message--extended">
			<h2 class="a-heading [ Modifers ]">...</h2>
			<p>...</p>
		</div>
	</div>
</div>

Large - inline

Interactive example

Code example

<div class="a-loading-indicator-container a-loading-indicator-container--inline">
	<div class="a-loading-indicator" role="alert">
		<span class="a-loading-indicator__message">...</span>
	</div>
</div>

Large - inline with H2 title and optional copy

Interactive example

Code example

<div class="a-loading-indicator-container a-loading-indicator-container--inline">
	<div class="a-loading-indicator" role="alert">
		<div class="a-loading-indicator__message a-loading-indicator__message--extended">
			<h2 class="a-heading [ Modifers ]">...</h2>
			<p>...</p>
		</div>
	</div>
</div>

Small

Interactive example

Code example

<div class="a-loading-indicator a-loading-indicator--small" role="alert">
	<span class="a-loading-indicator__message">...</span>
</div>

Development and test

Notes for developers

Ensure that an appropriate loading message is included and that the indicator is announced using aria.

The loading indicators are built so that they can be placed where nessary, ie. within or overlaying the page content; no overlays are included with this component.

Notes for testers

Ensure that all loading indicators have appropriate text associated with them and this is announced by screen readers when displayed.
For non-JavaScript and when animations are disabled, only text is displayed.
For browsers that do not support CSS animations, a white background behind the animated dots will be visible.

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class	Outcome	Required	Applied to	Comments
`.a-loading-indicator-container`	Container for the large loading indicator	Yes	`div`	Only required for the large indicator and must wrap the `.a-loading-indicator` div
`.a-loading-indicator-container--inline`	Modifer to remove the white background allowing the loading indicator to be used seamlessly within a page.		`.a-loading-indicator-container`
`.a-loading-indicator`	Base style for the loading indicator (default large)	Yes	`div`	If the large indicator this must be wrapped by a `.a-loading-indicator-container` div
`.a-loading-indicator--small`	Modifier to make an small indicator for inline use		`.a-loading-indicator`	Must not be wrapped by a `.a-loading-indicator-container` div
`.a-loading-indicator--small`	Modifier to make an small indicator for inline use		`.a-loading-indicator`	Must not be wrapped by a `.a-loading-indicator-container` div
`.a-loading-indicator__message`	To add include loading message text within the loading indicator	Yes	`.a-loading-indicator > span` `.a-loading-indicator > div`	Although this text is not visible in the small loader it is required for accessibility so that it is correctly announced, by screen readers, when used
`.a-loading-indicator__message--extended`	Modifer to allow H2 and H3 headings and a paragraph to be used for the accompanying text		`div.a-loading-indicator__message`	The heading used within this area must use the `a-heading` classes.

Component releases

Added on: v3.0.0 (15/09/17)
Updated on: v5.0.0 (05/10/20)

Latest update:

updated: The Positive Green used within the indicator has been updated from #4F9F31 to #3E812C, in order to improve colour contrast.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team