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="progressbar" aria-valuemin="" aria-valuemax="" aria-valuetext="Loading example">
    <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="progressbar" aria-valuemin="" aria-valuemax="" aria-valuetext="Loading small">
    <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="progressbar" aria-valuemin="" aria-valuemax="" aria-valuetext="Loading medium">
    <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="progressbar" aria-valuemin="" aria-valuemax="" aria-valuetext="Loading large">
    <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="progressbar" aria-valuemin="" aria-valuemax="" aria-valuetext="Loading positive color inherited from parent.">
        <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="progressbar" aria-valuemin="" aria-valuemax="" aria-valuetext="Loading negative color from applied class.">
    <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="progressbar" aria-valuemin="" aria-valuemax="" aria-valuetext="Loading primary theme color from applied class.">
    <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="progressbar" aria-valuemin="" aria-valuemax="" aria-valuetext="Loading secondary theme color from applied class.">
    <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="progressbar" aria-valuemin="" aria-valuemax="" aria-valuetext="Loading primary to secondary theme color transition.">
    <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 is to be treated as an indeterminate progressbar, thus it must have the role="progressbar", aria-valuemin="", and aria-valuemax="" attributes.
  • Use aria-valuetext to control what the screenreader states about the Loading component. It is suggested to provide a small bit of text to explain what the loading animation represents. Ex: "Loading transfers history."
  • 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.