VA Pattern Library

Loading Indicator: Inline 

<!-- SASS: src/stylesheets/_components/loading-indicator.scss -->
<!-- JS: src/js/loading-indicator.js -->

<!-- Default Indicator -->
<div class="vaux-loading-indicator--inline loading example" role="progressbar">
    <span class="usa-sr-only">Processing.</span>
    <div class="star1 vaux-loading-indicator-icon"></div>
    <div class="star2 vaux-loading-indicator-icon"></div>
    <div class="star3 vaux-loading-indicator-icon"></div>
    <div class="star4 vaux-loading-indicator-icon"></div>
    <div class="star5 vaux-loading-indicator-icon"></div>
    <div class="star6 vaux-loading-indicator-icon"></div>
    <div class="star7 vaux-loading-indicator-icon"></div>
    <div class="star8 vaux-loading-indicator-icon"></div>
</div>

<!-- Inverted Indicator -->
<div class="vaux-loading-indicator--inline indicator-inverted loading example" role="progressbar">
    <span class="usa-sr-only">Processing.</span>
    <div class="star1 vaux-loading-indicator-icon"></div>
    <div class="star2 vaux-loading-indicator-icon"></div>
    <div class="star3 vaux-loading-indicator-icon"></div>
    <div class="star4 vaux-loading-indicator-icon"></div>
    <div class="star5 vaux-loading-indicator-icon"></div>
    <div class="star6 vaux-loading-indicator-icon"></div>
    <div class="star7 vaux-loading-indicator-icon"></div>
    <div class="star8 vaux-loading-indicator-icon"></div>
</div>

<h6>Working example of an inline loading indicator</h6>

<div>
    <button type="button">Focusable Element</button>
</div>

<div>
    <button data-loading-trigger data-loader="inline" data-color="inverted" type="button">Reload</button>
</div>

<!-- Applying some styles to the indicator above so they stay on the page and aren't affected by the working example. Example class applied to them so they can be selected. -->
<style scoped>
    .vaux-loading-indicator--inline.example {
        margin-bottom: 2rem;
    }

    .vaux-loading-indicator--inline.loading.example {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        z-index: 0;
    }
</style>

UX Guidelines

Veteran’s Affairs UX Guide - Loading Indicators

Code Guidance

  • Loading indicators can be triggered by elements assigned with the 
    data-loading-trigger
    attribute or through Javascript during a page load.
  • If triggered by an element with 
    data-loading-trigger
    then the following data attributes are also available to control the behavior and style of the indicator: 
    • data-loader
      - With a value of inline if the element is going to house a inline loading indicator.
    • data-color
      - With a value of inverted if that style is required for the element or page.
  • An overlay is applied to the page when using the Page Loading indicators. This overlay prevents any action from taking place on the screen during loading, this includes scrolling on mobile devices.
  • Inline loading indicators take the place of an element’s text when they are present and are removed from the DOM upon an event’s completion.