spinning loading icons

src/static/css/pad.css

@@ -224,6 +224,39 @@ li[data-key=showusers] > a #online_count {
   padding:10px;
 }
 
+.loadingAnimation{
+  -webkit-animation: loadingAnimation 2s infinite linear;
+  animation: loadingAnimation 2s infinite linear;
+  font-family: "fontawesome-etherpad";
+  font-size:24px;
+  z-index:150;
+}
+
+.loadingAnimation:before{
+  content: "\e80e";
+}
+
+@-webkit-keyframes loadingAnimation {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes loadingAnimation {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
 #editorcontainerbox {
   position: absolute;
   bottom: 0;
@@ -1107,5 +1140,4 @@ input[type=checkbox] {
 .gritter-light .gritter-title {
   text-shadow: none;
 }
-
 /* End of gritter stuff */

src/templates/admin/plugins.html

@@ -49,7 +49,7 @@
               <td>
                 <div class="actions">
                   <input type="button" value="Uninstall" class="do-uninstall">
-                  <div class="progress"><p><img src="../static/img/loading.gif"/></p><p><span class="message"></span></p></div>
+                  <div class="progress"><p class="loadingAnimation"></p><p><span class="message"></span></p></div>
                 </div>
               </td>
             </tr>
@@ -59,7 +59,7 @@
           <tbody class="messages">
               <tr><td></td><td>
                 <p class="nothing-installed">You haven't installed any plugins yet.</p>
-                <p class="fetching"><img src="../static/img/loading.gif"/><br/>Fetching installed plugins...</p>
+                <p class="fetching"><p class="loadingAnimation"></p><br/>Fetching installed plugins...</p>
               </td><td></td></tr>
             </tbody>
         </table>
@@ -89,7 +89,7 @@
                 <td>
                   <div class="actions">
                     <input type="button" value="Install" class="do-install">
-                    <div class="progress"><p><img src="../static/img/loading.gif"/></p><p><span class="message"></span></p></div>
+                    <div class="progress"><p><p class="loadingAnimation"></p></p><p><span class="message"></span></p></div>
                   </div>
                </td>
               </tr>
@@ -101,7 +101,7 @@
                 <div class="messages">
                   <div id="search-progress" class="progress"><p>&nbsp;</p></div>
                   <p class="nothing-found">No plugins found.</p>
-                  <p class="fetching"><img src="../static/img/loading.gif"/><br/>Fetching...</p>
+                  <p class="fetching"><p class="loadingAnimation"></p><br/>Fetching...</p>
                 </div>
               </td><td></td></tr>
             </tbody>

src/templates/pad.html

@@ -191,7 +191,7 @@
                     <div class="importformdiv" id="importformsubmitdiv">
                         <span class="nowrap">
                             <input type="submit" name="submit" value="Import Now" disabled="disabled" id="importsubmitinput">
-                            <img alt="" id="importstatusball" src="../static/img/loading.gif" align="top">
+                            <div alt="" id="importstatusball" class="loadingAnimation" align="top"></div>
                         </span>
                     </div>
                 </form>
@@ -308,7 +308,7 @@
               <a id="titlesticky" onClick="chat.stickToScreen(true);$('#options-stickychat').prop('checked', true);return false;" title="Stick chat to screen">█&nbsp;&nbsp;</a>
             </div>
             <div id="chattext" class="authorColors">
-                <img alt="loading.." id="chatloadmessagesball" class="chatloadmessages" src="../static/img/loading.gif" align="top">
+                <div alt="loading.." id="chatloadmessagesball" class="chatloadmessages loadingAnimation" align="top"></div>
                 <button id="chatloadmessagesbutton" class="chatloadmessages" data-l10n-id="pad.chat.loadmessages"></button>
             </div>
             <div id="chatinputbox">