Skip to content

Loading

CSS classes for the loading elements.

This utilizes a SVG as a background so it's easy to swap out if needed. The colors are available via a style tag in the SVG.

Usage

<div class="g-loading">Loading...</div>
<div class="g-loading-small">Loading...</div>

By default it will be shown.

If you want to display it with an overlay & in the center of an element, add the g-loading-overlay class to a parent element.

Example:

    <form>
        <div class="g-loading-overlay">
            <div class="g-loading">Loading...</div>
            <!-- Rest of my inputs -->
        </div>
    </form>

Variations

  • Loading: 48x48
  • Loading Small: 16x16