Loading

Loading is a decorative component that can indicate a loading state with an animation.

Coming soon...

Please enjoy a cat while you wait

Loading is a decorative component that can indicate a loading state with an animation.

Coming soon...

Please enjoy a cat while you wait

Loading is a decorative component that can indicate a loading state with an animation.

Examples

For details on when to use this component, please see the Usage tab.

NOTE: The appearance of this component will be slightly different in Internet Explorer 11 as it doesn't support necessary CSS features. The most obvious difference is the secondary animation of the stroke contracting and expanding will not happen.

<span class="iris-loading" data-size="medium" role="status" aria-label="loading">
    <svg class="iris-loading-svg" viewBox="25 25 50 50">
        <circle class="iris-loading-path" cx="50" cy="50" r="20" />
    </svg>
</span>

Variants

For the following variants, the only attribute that needs to be updated is the data-size attribute on the loading element.

<div class="iris-loading" data-size="small">
    // Small Loading (16px)
</div>

<div class="iris-loading" data-size="medium">
    // Medium Loading (32px)
</div>

<div class="iris-loading" data-size="large">
    // Large Loading (64px)
</div>

Small

<span class="iris-loading" data-size="small" role="status" aria-label="loading">
    <svg class="iris-loading-svg" viewBox="25 25 50 50">
        <circle class="iris-loading-path" cx="50" cy="50" r="20" />
    </svg>
</span>

Medium

<span class="iris-loading" data-size="medium" role="status" aria-label="loading">
    <svg class="iris-loading-svg" viewBox="25 25 50 50">
        <circle class="iris-loading-path" cx="50" cy="50" r="20" />
    </svg>
</span>

Large

<span class="iris-loading" data-size="large" role="status" aria-label="loading">
    <svg class="iris-loading-svg" viewBox="25 25 50 50">
        <circle class="iris-loading-path" cx="50" cy="50" r="20" />
    </svg>
</span>

Colors

By default, the loading component will inherit the current font-color being passed from the parent or from a font color utility class being applied to the component element. This is similar behavior to the font-based icon library used in Iris.

Inherit from Parent

<div class="font-color--positive">
    <span class="iris-loading" data-size="large" role="status" aria-label="loading">
        <svg class="iris-loading-svg" viewBox="25 25 50 50">
            <circle class="iris-loading-path" cx="50" cy="50" r="20" />
        </svg>
    </span>
</div>

Inherit from Applied Class

<span class="iris-loading font-color--negative" data-size="medium" role="status" aria-label="loading">
    <svg class="iris-loading-svg" viewBox="25 25 50 50">
        <circle class="iris-loading-path" cx="50" cy="50" r="20" />
    </svg>
</span>

Theme Colors

There are also font color utility classes for a theme's primary and secondary font colors. Using these classes will also change the current color of the component.

Primary Color

(change theme primary color for examples)

<span class="iris-loading font-color--theme-primary" data-size="medium" role="status" aria-label="loading">
    <svg class="iris-loading-svg" viewBox="25 25 50 50">
        <circle class="iris-loading-path" cx="50" cy="50" r="20" />
    </svg>
</span>

Secondary Color

(change theme secondary color for examples)

<span class="iris-loading font-color--theme-secondary" data-size="medium" role="status" aria-label="loading">
    <svg class="iris-loading-svg" viewBox="25 25 50 50">
        <circle class="iris-loading-path" cx="50" cy="50" r="20" />
    </svg>
</span>

Transtion Between Primary and Secondary Color

If both the primary and secondary theme font color classes are applied, it is assumed to have a transition effect between the two colors.

Colors can be changed by the two examples above.

NOTE: This functionality will not be present in Internet Explorer 11 as it does not support necessary CSS features. Only one color will be applied.

<span class="iris-loading font-color--theme-primary font-color--theme-secondary" data-size="medium" role="status" aria-label="loading">
    <svg class="iris-loading-svg" viewBox="25 25 50 50">
        <circle class="iris-loading-path" cx="50" cy="50" r="20" />
    </svg>
</span>

Accessibility

As always, we want all of the components in the application to be accessible. Please keep the following notes in mind while using this component:

  • The Loading component conveys information about the status of the application, so a role="status" is used to notify the Assistive Technologies (AT) that content on the page is in the process of changing or being updated.

  • By using a role of status, this tells the AT to provide information to the user about updates which have been made to the container marked with this role="status". The AT will present the entire contents of the container to the user, such as author-defined lables or text content within the container. In this case where the contents are an svg circle and not text, we provide aria-label="loading" so that the AT can convey to the user a text description which states that the svg image in this container depicts a state of loading visually as a spinner.

  • If the Loading component is indicating that a region elsewhere on the page is being updated, then accessibility should be handled by that region and not this component.

Variables

The variables used in this component are as follows:

// animation durations
$iris-loading-rotation-duration: 2s !default;
$iris-loading-dash-duration: 1.5s !default;
$iris-loading-color-duration: $iris-loading-dash-duration * 2 !default;

Themeability

The Loading component is themeable by applying the "font-color--theme-primary" and the "font-color--theme-secondary" classes to the root element of the component. Both theme-based font colors can be applied simultaneously for an animation that transitions between the two colors.