EUAA Design System

Loading Indicator

For pages or page sections that take a bit longer to load, show a loading animation to keep the user informed that the page didn't freeze.

Loading animation

<div class="euaa-loading-indicator"> 
    <div class="euaa-loading-indicator__circle-1"></div>
    <div class="euaa-loading-indicator__circle-2"></div>
</div>

Panel and page overlay

Carefully consider if you can increase the usability by overlaying the entire page, or only a content section, with a dark semi-transparent colour. This might be the case when you want to prevent the user from interacting with the page while data is being loaded, or even just to give more prominence to the loading message.

Section loading

The loading indicator can also be applied to sections of the page, while the remaining part of the page stays unchanged. This could be the case after starting a search that affects only a table.