loading-circle
Animated loading circle icon
It requires CSS3 Animations to work.
Simply add a span
element with the loading-circle
class.
<span class="loading-circle"></span>
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.
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>
You can easily add icons with different colors.
.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);
}