Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Spinner

Spinners are used to help convey that the user should wait for the system to resolve.

Spinners can be helpful to signal to a user that the current process may require a few seconds.

Before using a spinner Consider if there is a way to improve the performance of the sign to mitigate the use of a spinner.

Example of a spinner

<div class="lg-spinner">
  <div>
    <img src="/assets/img/spinner.gif" srcset="/assets/img/spinner@2x.gif" width="144" height="144" class="text-middle" alt="Spinner" />
  </div>
</div>

Using a button click to launch a spinner

We may want to start with a hidden spinner and then remove it with a button click will the page transition resolves.

<button class="usa-button__lg-invokeSpinner">Hide Button and trigger a spinner</button>
<div class="lg-spinner lg-spinner--hidden" id="spinner-id">
  <div>
    <img src="/assets/img/spinner.gif" srcset="/assets/img/spinner@2x.gif" width="144" height="144" class="text-middle" alt="Spinner" />
  </div>
</div>