Content loader
When entire content blocks need to be loaded, you can use the content loader. Make sure you add the class ox-is-loading to the div containing the loaded content.
Don't place the loader over the entire page, but just over the part of the content that is being loaded (this to prevent the entire page from being blocked when loading a single part of the content).
To make the loaded content accessible to screen readers, you should add the attributes role="status", aria-live="polite" and aria-label="Content loading" to the div containing the loading content. This will make sure that it's called out to screen readers when the content has been loaded. (after loading the content and removing the loader, you should also update the aria label to "Content loaded".
When the content has been loaded, remove the ox-is-loading class to make the content visible again.
1
2
3
<div class="ox-is-loading" role="status" aria-live="polite" aria-label="Content loading">
<img src="https://ox.qone.mateco.eu/assets/img/loader.svg" alt="Loading..." class="ox-loader" aria-hidden="true"/>
</div>
Loaded progress
If you actually know the progress made of the loading element (e.g. when uploading a file, you can use the progress loader.
This should be used inside specific elements and can be implemented multiple times on a page.
For accessibility reasons, you should add the attribute role="progressbar" accompanied by the correct aria-labels with the current, min and max value of the progress bar.
When updating the normal value of the progress, it is needed to update the aria-valuenow as well, as this will be spoken out to users with screen readers.
1
<progress class="ox-progress" value="25" min="0" max="100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></progress>