spinning loading icons

This commit is contained in:
John McLear 2014-11-18 19:13:51 +00:00
parent 3ad9a58895
commit 9b5ee93bce
3 changed files with 39 additions and 7 deletions

View File

@ -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 */

View File

@ -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>

View File

@ -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">