<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>Spinners</h2>
<ol class="breadcrumb">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a>Miscellaneous</a>
</li>
<li class="active">
<strong>Spinners</strong>
</li>
</ol>
</div>
<div class="col-lg-2">
</div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="ibox ">
<div class="ibox-title">
<h5>Simple loading spinners animated with CSS</h5>
</div>
<div class="ibox-content">
<p>
SpinKit uses CSS animations to create smooth and easily customizable animations. You have to note that spinners use CSS3 animation.
</p>
<p>Grab the HTML and CSS for a spinner and include it in your project. Note that a hidden spinner (<code>opacity: 0</code>, or <code>visibility: hidden</code>) will still animate. After hiding a spinner, it's recommended to remove it from the DOM, so it is good practive if you will use <code>ng-if</code> or pause the animation by setting <code>animation-play-state: paused</code>.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="ibox ">
<div class="ibox-title">
<h5>Rotating plane</h5>
</div>
<div class="ibox-content">
<div class="spiner-example">
<div class="sk-spinner sk-spinner-rotating-plane"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="ibox ">
<div class="ibox-title">
<h5>Double bounce</h5>
</div>
<div class="ibox-content">
<div class="spiner-example">
<div class="sk-spinner sk-spinner-double-bounce">
<div class="sk-double-bounce1"></div>
<div class="sk-double-bounce2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="ibox ">
<div class="ibox-title">
<h5>Wave</h5>
</div>
<div class="ibox-content">
<div class="spiner-example">
<div class="sk-spinner sk-spinner-wave">
<div class="sk-rect1"></div>
<div class="sk-rect2"></div>
<div class="sk-rect3"></div>
<div class="sk-rect4"></div>
<div class="sk-rect5"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="ibox ">
<div class="ibox-title">
<h5>Wandering cubes</h5>
</div>
<div class="ibox-content">
<div class="spiner-example">
<div class="sk-spinner sk-spinner-wandering-cubes">
<div class="sk-cube1"></div>
<div class="sk-cube2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="ibox ">
<div class="ibox-title">
<h5>Pulse</h5>
</div>
<div class="ibox-content">
<div class="spiner-example">
<div class="sk-spinner sk-spinner-pulse"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="ibox ">
<div class="ibox-title">
<h5>Chasing dots</h5>
</div>
<div class="ibox-content">
<div class="spiner-example">
<div class="sk-spinner sk-spinner-chasing-dots">
<div class="sk-dot1"></div>
<div class="sk-dot2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="ibox ">
<div class="ibox-title">
<h5>Three bounce</h5>
</div>
<div class="ibox-content">
<div class="spiner-example">
<div class="sk-spinner sk-spinner-three-bounce">
<div class="sk-bounce1"></div>
<div class="sk-bounce2"></div>
<div class="sk-bounce3"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="ibox ">
<div class="ibox-title">
<h5>Circle</h5>
</div>
<div class="ibox-content">
<div class="spiner-example">
<div class="sk-spinner sk-spinner-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="ibox ">
<div class="ibox-title">
<h5>Cube grid</h5>
</div>
<div class="ibox-content">
<div class="spiner-example">
<div class="sk-spinner sk-spinner-cube-grid">
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="ibox ">
<div class="ibox-title">
<h5>Fading circle</h5>
</div>
<div class="ibox-content">
<div class="spiner-example">
<div class="sk-spinner sk-spinner-fading-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Christopher W. Olsen