HTML/CSS/LESS version of Google Polymer's Paper Spinner element
https://cdn.rawgit.com/longzheng/paper-spinner-less/master/demo.html
Include the CSS
<link rel="stylesheet" href="paper-spinner.css" />
Insert the spinner template. Unfortunately due to the way the spinner is animated, the HTML template is quite big heavily nested. Might be useful to use a frontend framework like Angular to turn this into a template include.
<div class="paper-spinner">
<div class="spinner-container active">
<div class="spinner-layer layer-1">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer layer-2">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer layer-3">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer layer-4">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
In the LESS file, you can customize the color options by using the mixin.
// Custom color
.paper-spinner.customcolor {
.paper-spinner(#00fc38);
}
Then add the class in your HTML
<div class="paper-spinner customcolor">