Indigo Design System v1.2.0

Loader

Loaders limit user stress by letting them know the system/application received the information and is working.

Overview

Knowing the system/application hasn’t stalled or frozen, helps build user trust and confidence by letting them know that system/application is working properly.

These loader guidelines are designed to ensure consistency across all USAC products.

Design and Implementation

The loader is designed to match the USAC logo motif.

Overlay

html
copy-2 Copy to Clipboard 
<div class="indi-loader indi-loader--overlay" aria-label="Loading">
    <ul class="indi-loader__motif">
        <li class="indi-loader__motif-item indi-loader__motif-item--1"></li>
        <li class="indi-loader__motif-item indi-loader__motif-item--2"></li>
        <li class="indi-loader__motif-item indi-loader__motif-item--3"></li>
        <li class="indi-loader__motif-item indi-loader__motif-item--4"></li>
    </ul>
</div>

Inline

html
copy-2 Copy to Clipboard 
<div class="indi-loader indi-loader--inline" aria-label="Loading">
    <ul class="indi-loader__motif">
        <li class="indi-loader__motif-item indi-loader__motif-item--1"></li>
        <li class="indi-loader__motif-item indi-loader__motif-item--2"></li>
        <li class="indi-loader__motif-item indi-loader__motif-item--3"></li>
        <li class="indi-loader__motif-item indi-loader__motif-item--4"></li>
    </ul>
</div>

Use Guidelines

Use When

  • The system/application reaction time is long and takes more than one second but less than ten seconds to load the information.

Don’t Use When

  • The system/application reaction time is immediate or takes less than one second to load the information.
  • The system/application will take longer than ten seconds to load (when loading large amounts of data for example). In this case, use a percent-done progress indicator.

Accessibility

  • Provide an aria-label=”loading” attribute on Loader component.