paper-spinner-less

HTML/CSS/LESS version of Google Polymer's Paper Spinner element

Demo

https://cdn.rawgit.com/longzheng/paper-spinner-less/master/demo.html

How to use

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>

Customize

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