<h1>CSS Spinners</h1>

<p>A collection of animated CSS spinners, throbbers, and loaders with minimal markup. Each spinner will display as &#8220;Loading&#8230;&#8221; in IE9 and below. Learn more at <a href="https://github.com/jlong/css-spinners">https://github.com/jlong/css-spinners</a></p>

<div class="grid">

<div class="cell">
  <div class="card">
    <span class="spinner-loader">Loading&#8230;</span>
  </div>
</div>

<div class="cell">
  <div class="card">
    <span class="throbber-loader">Loading&#8230;</span>
  </div>
</div>

<div class="cell">
  <div class="card">
    <span class="refreshing-loader">Loading&#8230;</span>
  </div>
</div>

<div class="cell">
  <div class="card">
    <span class="heartbeat-loader">Loading&#8230;</span>
  </div>
</div>

<div class="cell">
  <div class="card">
    <span class="gauge-loader">Loading&#8230;</span>
  </div>
</div>

<div class="cell">
  <div class="card">
    <span class="timer-loader">Loading&#8230;</span>
  </div>
</div>

<div class="cell">
  <div class="card">
    <span class="three-quarters-loader">Loading&#8230;</span>
  </div>
</div>

<div class="cell">
  <div class="card">
    <span class="wobblebar-loader">Loading&#8230;</span>
  </div>
</div>

<div class="cell">
  <div class="card">
    <span class="atebits-loader">Loading&#8230;</span>
  </div>
</div>

<div class="cell">
  <div class="card">
    <span class="whirly-loader">Loading&#8230;</span>
  </div>
</div>

<div class="cell">
  <div class="card">
    <span class="flower-loader">Loading&#8230;</span>
  </div>
</div>

<div class="cell">
  <div class="card">
    <span class="dots-loader">Loading&#8230;</span>
  </div>
</div>

<div class="cell">
  <div class="card">
    <span class="circles-loader">Loading&#8230;</span>
  </div>
</div>

<div class="cell">
  <div class="card">
    <span class="plus-loader">Loading&#8230;</span>
  </div>
</div>

<div class="cell">
  <div class="card">
    <span class="ball-loader">Loading&#8230;</span>
  </div>
</div>

</div>

body {
  background: #f3f6f9;
  font-family: sans-serif;
  font-weight: 100;
  font-size: 14px;
  margin: 0;
  padding: 20px;
}

h1 {
  color: #9398c9;
  font-size: 48px;
  font-family: sans-serif;
  font-weight: 900;
  letter-spacing: -1px;
  margin: 20px;
}

p { margin: 20px; }

a {
  color: #9398c9;
}

.grid {
  overflow: hidden;
}

.cell {
  float: left;
  width: 25%;
  box-sizing: border-box;
  padding: 20px;
  display: table;
}

.card {
  background: white;
  border: 1px solid #c3c6cf;
  border-radius: 15px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 200px;
}