Loading icon

You spin me right round, right round round round

How we design them

• Use to show that something is happening
• For users who prefer reduced motion, this icon will show as ‘Loading…’

How they look

1. Default behaviour

    <span class="gg-c-loading-icon"></span>

  

2. Horizontally centred

    <span class="gg-c-loading-icon gg-c-loading-icon--center"></span>

  

3. Mixin alternative

The loading-icon mixin can be used when it’s not practical to add a new element to a page.

Parameters:

• $center - Vertically and horizontally centre the icon. The default value is ‘false’
• $color - Change the colour of the loading icon. The default value is ‘currentColor’
• $centerOffsetX - Use to adjust vertical position of centred icon. The default value is 0
• $centerOffsetY - Use to adjust horizontal position of centred icon. The default value is 0

  .el {
    $parameters: (
      'center': true,
      'color': light-blue,
      'centerOffsetX': -1 * getSpacer(small),
      'centerOffsetY': -1 * getSpacer(small)
    );

    @include loading-icon($parameters...);
  }