Loading circle animation

Simply add a span element with the loading-circle class.

<span class="loading-circle"></span>

It requires CSS3 animations to work.

The icon is an inline-element, and it's size depends on the font-size property, which can be set to the icon itself or will be inherited from a parent element.

Loading icon inside a button. Icon font size is set to 70% of it's parent's font size.
Loading icon inside an element with larger font-size

Icon color

The default colors are dark and light. 

<div class="panel light">
  <span class="loading-circle loading-circle-dark"></span>
  Dark loading icon in a light space
</div>
<div class="panel dark">
  <span class="loading-circle loading-circle-light"></span>
  Light loading icon in a dark space
</div>
Dark loading icon in a light space
Light loading icon in a dark space

You can easily add icons with different colors.

<style>
  .loading-circle-green::after,
  .loading-circle-green::before {
    border-color: rgba(0, 180, 0, .5);
  }

  .loading-circle-yellow::after,
  .loading-circle-yellow::before {
    border-color: rgba(255, 255, 0, .5);
  }

  .loading-circle-red::after,
  .loading-circle-red::before {
    border-color: rgba(255, 0, 0, .5);
  }
</style>
Red loading icon
Yellow loading icon
Green loading icon