Mirrors/ICEcoder
2
0
Fork 0
mirror of https://github.com/icecoder/ICEcoder.git synced 2026-03-06 08:44:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

New loading animation by @tobiasahlin

Browse Source 
New, more modern loading animation created by @tobiasahlin
Less code and far more awesome looking
This commit is contained in:
Matt Pass
2013-12-20 10:16:34 +00:00
parent d393018cd3
commit 581cef9550
2 changed files with 15 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.php
View File

@@ -89,9 +89,8 @@ window.onbeforeunload = function() {
<div id="loadingMask" class="blackMask" style="visibility: visible" onContextMenu="return false">
<div class="popupVCenter">
<div class="popup">
<div class="circleOutside"></div>
<div class="circleInside"></div>
&nbsp;&nbsp;&nbsp;working...
<div class="spinner"></div>
working...
</div>
</div>
</div>

32
lib/ice-coder.css
View File

@@ -33,27 +33,21 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
.popupVCenter .popup {#position: relative; #top: -50%; text-align: center; color: #fff; font-size: 10px}
.whiteGlow {box-shadow: 0 0 8px 2px rgba(255,255,255,0.6)}
.circleOutside {background-color: rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-top:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 35px #2187e7;
width:50px; height:50px; margin:0 auto; animation:spin .5s infinite linear; -webkit-animation:spin .5s infinite linear;
.spinner {width: 50px; height: 50px; margin: 20px auto; background: #fff;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
.circleInside {background-color: rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-top:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 15px #2187e7;
width:30px; height:30px; margin:0 auto; position:relative; top:-50px; animation:spinoff .5s infinite linear; -webkit-animation:spinoff .5s infinite linear;
@-webkit-keyframes rotateplane {
0% {-webkit-transform: perspective(120px)}
50% {-webkit-transform: perspective(120px) rotateY(180deg)}
100% {-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)}
}
@keyframes spin {
0% {transform:rotate(0deg)}
100% {transform:rotate(360deg)}
}
@keyframes spinoff {
0% {transform:rotate(0deg)}
100% {transform:rotate(-360deg)}
}
@-webkit-keyframes spin {
0% {-webkit-transform:rotate(0deg)}
100% {-webkit-transform:rotate(360deg)}
}
@-webkit-keyframes spinoff {
0% {-webkit-transform:rotate(0deg)}
100% {-webkit-transform:rotate(-360deg)}
@keyframes rotateplane {
0% {transform: perspective(120px) rotateX(0deg) rotateY(0deg)}
50% {transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)}
100% {transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}
}
.plugins {position: absolute; display: inline-block; width: 3px; height: 100%; top: 0; left: 0; background: transparent; overflow: hidden; z-index: 3;