ionic-team
diff --git a/‎animation.html‎
Lines changed: 97 additions & 0 deletions b/‎animation.html‎
Lines changed: 97 additions & 0 deletions
diff --git a/‎css/ionicons.css‎
Lines changed: 21 additions & 12 deletions b/‎css/ionicons.css‎
Lines changed: 21 additions & 12 deletions
@@ -0,0 +1,97 @@
+<!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-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>
+
+    </div>
+  </div>
+</body>
+</html>
@@ -1,4 +1,4 @@
-/*!
+/*
   Ionicons, v1.3.0
   Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
   https://twitter.com/helloimben  https://twitter.com/ionicframework
@@ -11,7 +11,11 @@
   font-weight: normal;
   font-style: normal; }
 
-.ion, .ionicons,
+.ion, .ion-loading-a,
+.ion-loading-b,
+.ion-loading-c,
+.ion-loading-d,
+.ion-refreshing, .ionicons,
 .ion-alert,
 .ion-alert-circled,
 .ion-archive,
@@ -455,6 +459,7 @@
 .ion-wineglass,
 .ion-woman,
 .ion-wrench {
+  display: inline-block;
   font-family: "Ionicons";
   speak: none;
   font-style: normal;
@@ -465,11 +470,15 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }
 
-.ion-spin {
-  -webkit-animation: spin 2s infinite linear;
-  -moz-animation: spin 2s infinite linear;
-  -o-animation: spin 2s infinite linear;
-  animation: spin 2s infinite linear; }
+.ion-spin, .ion-loading-a,
+.ion-loading-b,
+.ion-loading-c,
+.ion-loading-d,
+.ion-refreshing {
+  -webkit-animation: spin 0.8s infinite linear;
+  -moz-animation: spin 0.8s infinite linear;
+  -o-animation: spin 0.8s infinite linear;
+  animation: spin 0.8s infinite linear; }
 
 @-moz-keyframes spin {
   0% {
@@ -1451,16 +1460,16 @@
 .ion-link:before {
   content: "\f1fe"; }
 
-.ion-load-a:before {
+.ion-load-a:before, .ion-loading-a:before {
   content: "\f29a"; }
 
-.ion-load-b:before {
+.ion-load-b:before, .ion-loading-b:before {
   content: "\f29b"; }
 
-.ion-load-c:before {
+.ion-load-c:before, .ion-loading-c:before {
   content: "\f29c"; }
 
-.ion-load-d:before {
+.ion-load-d:before, .ion-loading-d:before {
   content: "\f29d"; }
 
 .ion-location:before {
@@ -1595,7 +1604,7 @@
 .ion-record:before {
   content: "\f21b"; }
 
-.ion-refresh:before {
+.ion-refresh:before, .ion-refreshing:before {
   content: "\f21c"; }
 
 .ion-reply:before {