diff options
| -rw-r--r-- | js/functions.js | 6 | ||||
| -rw-r--r-- | static/style.css | 43 |
2 files changed, 49 insertions, 0 deletions
diff --git a/js/functions.js b/js/functions.js index 6b0dcf4..d19ba11 100644 --- a/js/functions.js +++ b/js/functions.js @@ -11,9 +11,15 @@ $('.modal').draggable({ handle: ".modal-header" }); function loadFancy(){ +/* document.getElementById("loader").style.backgroundImage="url('" +cdn + "/img/loading.gif')"; document.getElementById("loader").style.visibility="visible"; document.getElementById("loader-bg").style.visibility="visible"; +*/ + + $(".spinner").style.visibility="visible"; + document.getElementById("loader").style.visibility="visible"; + document.getElementById("loader-bg").style.visibility="visible"; var eyecancer = document.createElement("script"); eyecancer.type = "text/javascript"; diff --git a/static/style.css b/static/style.css index f6319cc..22aedb3 100644 --- a/static/style.css +++ b/static/style.css @@ -125,3 +125,46 @@ a { .nav-tabs{ margin: 20px; } + + .spinner { + width:30px; + height:30px; + margin:100px auto; + visibility: hidden; + } + + .cube { + width:33%; + height:33%; + background:#333; + float:left; + -webkit-animation: scaleDelay 1.3s infinite ease-in-out; + animation: scaleDelay 1.3s infinite ease-in-out; + } + + /* + * Spinner positions + * 1 2 3 + * 4 5 6 + * 7 8 9 + */ + + .spinner .cube:nth-child(1) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s } + .spinner .cube:nth-child(2) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s } + .spinner .cube:nth-child(3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s } + .spinner .cube:nth-child(4) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s } + .spinner .cube:nth-child(5) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s } + .spinner .cube:nth-child(6) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s } + .spinner .cube:nth-child(7) { -webkit-animation-delay: 0.0s; animation-delay: 0.0s } + .spinner .cube:nth-child(8) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s } + .spinner .cube:nth-child(9) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s } + + @-webkit-keyframes scaleDelay { + 0%, 70%, 100% { -webkit-transform:scale3D(1.0, 1.0, 1.0) } + 35% { -webkit-transform:scale3D(0.0, 0.0, 1.0) } + } + + @keyframes scaleDelay { + 0%, 70%, 100% { -webkit-transform:scale3D(1.0, 1.0, 1.0); transform:scale3D(1.0, 1.0, 1.0) } + 35% { -webkit-transform:scale3D(1.0, 1.0, 1.0); transform:scale3D(0.0, 0.0, 1.0) } + } |