Toggle menu

Loader

Loaders give visual feedback to users, indicating that content is being processed or loaded.

When to use the component

Use a loader component when content is being loaded or processed.This is particularly useful when waiting for large datasets, images, or dynamic content to appear. Aim for a subtle yet clear loader design to avoid disrupting the user experience while ensuring users know that the system is working.

If your content is already ready to be shown or needs to be displayed instantly, consider not using a loader, as it could cause unnecessary delays. A loader is a great choice when you need to keep users informed and engaged without frustrating them while waiting for content to load.

Examples in GOSS products

  • While form content is loading a service or API call
  • Case Search template while it retrieves cases

 

Accessibility considerations

Loader components are designed with accessibility in mind, ensuring that all users understand when content is loading. They follow best practices to provide visual or textual feedback, making it clear that the system is processing a task.

Loaders can include descriptive messages or animations to inform users about progress, ensuring a more inclusive experience for those using assistive technologies.

Basic loader

A loader with no additional configuration options. 

Loading
HTML
<div class="gi-loader">
    <span class="accessibility">Loading</span>
</div>

Share this page

Facebook icon Twitter icon email icon

Print

print icon