<!DOCTYPE html>
<html>
<head>
  <title>Ionicons Animations</title>
  <style>
    * {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background: #fff;
      color: #444;
      font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    a, a:visited {
      color: #888;
      text-decoration: underline;
    }
    a:hover, a:focus { color: #000; }
    p { margin-bottom: 20px; }

    header {
      border-bottom: 2px solid #ddd;
      margin-bottom: 20px;
      overflow: hidden;
      padding: 20px 0;
    }

    header h1 {
      color: #888;
      float: left;
      font-size: 36px;
      font-weight: 300;
    }

    header a {
      float: right;
      font-size: 14px;
    }

    .container {
      margin: 0 auto;
      max-width: 1200px;
      min-width: 960px;
      padding: 0 20px;
      width: 95%;
    }

    .icon {
      font-size: 32px;
    }
  </style>
  <link href="css/ionicons.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
  <div class="container">
    <header>
      <h1>Ionicons Animations:</h1>
      <p><a href="http://ionicons.com/">Ionicons Homepage</a></p>
    </header>
    <div class="content">

      <h3>.ion-refreshing</h3>
      <p>
        <i class="icon ion-refreshing"></i>
      </p>

      <h3>.ion-ios7-reloading</h3>
      <p>
        <i class="icon ion-ios7-reloading"></i>
      </p>

      <h3>.ion-loading-a</h3>
      <p>
        <i class="icon ion-loading-a"></i>
      </p>

      <h3>.ion-loading-b</h3>
      <p>
        <i class="icon ion-loading-b"></i>
      </p>

      <h3>.ion-loading-c</h3>
      <p>
        <i class="icon ion-loading-c"></i>
      </p>

      <h3>.ion-loading-d</h3>
      <p>
        <i class="icon ion-loading-d"></i>
      </p>

      <h3>.ion-looping</h3>
      <p>
        <i class="icon ion-looping"></i>
      </p>

    </div>
  </div>
</body>
</html>