Loading

Examples

´

<svg class="loading__distractor loading__distractor--small" width="15px" height="15px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">´
  <circle class="loading__path" cx="15" cy="15" r="12"></circle>
</svg>

    

<svg class="loading__distractor" width="30px" height="30px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
   <circle class="loading__path" cx="15" cy="15" r="12"></circle>
</svg>

    

Loading...


<div class="loading">
  <svg class="loading__distractor" width="30px" height="30px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
    <circle class="loading__path" cx="15" cy="15" r="12"></circle>
  </svg>
  <p class="loading__text">Loading...</p>
</div>

    

Introduction

The Groundhog loading distractor is an element, representing a saving or loading action. I can be combined with text. The small version of the loading distractor can be used for indicating saving of input fields and loading in buttons.

Button versions

The Groundhog loading distractor appears in a two versions:

Including a button

  1. To include a Groundhog loading distractor add the <svg> element with a <circle>. Include the necessary text content.

    <svg>
    <circle></circle>
    </svg>
    
  2. Add the necessary Groundhog classes to the elements class attribute.

    <svg class="loading__distractor">
    <circle class="loading__path"></circle>
    </svg>
    
  3. The loading distractor is ready to use

Available classes for button

class name effect
.loading__distractor Base class for the loading distractor
.loading__distractor--small Small version of loading distractor for input fields and buttons