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>

    

<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:

• Standard loading distractor loading__distractor
• Loading distractor for input fields and buttons loading--small

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