Loading icon

You spin me right round, right round round round


How we design them

  • Use to show that something is happening

How they look

1. Default behaviour

View demo Open in new window
320 x 568
View code
<span class="gg-c-loading-icon"></span>

2. Horizontally centred

View demo Open in new window
320 x 568
View code
<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...);
    }