---
title: "Loading Spinner — Usage"
canonical: https://sky-ui.cf.sky.com/components/loading-spinner/usage
---

# Loading Spinner — Usage

The loading spinner uses animation to show that an activity is in progress.

<span>Saving changes</span>
    

## Basic Guidelines

The Loading Spinner uses animation to show that an activity is in progress. It is an indeterminate circular progress indicator, which means it keeps spinning until the process is complete.

The Loading Spinner is primarily used for in-page interactions, rather than full-page loads.

It can be used in combination with additional labelling to keep the user informed about the ongoing process.

## Alignment

The Loading Spinner is used in the disabled variant of the [Button](/components/button/). It can also replace the Button altogether if it’s used with a label. It should not replace the entire text within a Button.

If possible, using a Loading Spinner should not impact any elements on the page (i.e. not pushing an adjacent Button down or to the side).

<span>Saving changes</span>
        
  

Loading Spinners can also be used within [Modals](/components/modal/). While the Loading Spinner is active, the Modal content is dropped back and disabled. The Loading Spinner is positioned in the centre and must always have a label to inform the user about the process.

      
          Processing...

## Sizing

Ensure you always use the small variant of the Loading Spinner (default in Figma).

<span>Saving changes</span>
        
  <span>Saving changes</span>