autorenew Preloader

If you have content that will take a long time to load, you should give the user feedback. For this reason we provide a number activity + progress indicators.

Linear

There are a couple different types of linear progress bars.

Determinate
	            	
<div class="progress">
	<div class="determinate" style="width: 70%"></div>
</div>
Indeterminate
	            	
<div class="progress">
	<div class="indeterminate"></div>
</div>

Circular

There are 4 colors and 3 sizes of circular spinners. The spinner should be nested in a preloader-wrapper div. The default size is medium, but you can add the classes big or small to adjust the size accordingly. You can add the classes spinner-red-only, spinner-blue-only, spinner-yellow-only and spinner-green-only. You can also leave this class as just spinner-layer and it will be set to the $spinner-default-color variable in our variables.scss file.

Colors
	            	
<div class="preloader-wrapper big active">
	<div class="spinner-layer spinner-blue-only">
		<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 class="preloader-wrapper big active">
	<div class="spinner-layer spinner-red-only">
		<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 class="preloader-wrapper big active">
	<div class="spinner-layer spinner-green-only">
		<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>

Circular Flashing Colors

	            	
<div class="preloader-wrapper big active">
	<div class="spinner-layer spinner-blue">
		<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 spinner-red">
		<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 spinner-yellow">
		<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 spinner-green">
		<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>