Misterzym
/
Rambox-CE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Better spinner on start 😉

pull/116/head
Ramiro Saenz 9 years ago
parent
46ec0f0406
commit
aac1846c4b
2 changed files with 156 additions and 124 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      index.html
  2. 254
      packages/local/rambox-default-theme/sass/etc/all.scss

12
index.html
Unescape View File

@ -1,5 +1,5 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html manifest=""> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -14,14 +14,6 @@
<script src="https://cdn.auth0.com/js/lock-9.1.js"></script> <script src="https://cdn.auth0.com/js/lock-9.1.js"></script>
</head> </head>
<body> <body>
<div id="spinner"> <div id="spinner" class='uil-ring-css' style='transform:scale(1);'><div></div></div>
<img src="resources/Icon.png" />
<div class="sk-folding-cube">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
</div>
</body> </body>
</html> </html>

254
packages/local/rambox-default-theme/sass/etc/all.scss
Unescape View File

@ -7,122 +7,162 @@ $font-family: 'Roboto', sans-serif;
// Spinner // Spinner
body { body {
margin: 0; margin: 0;
}
#spinner {
width: 100%;
height: 100%;
top: 0;
z-index: 999999;
position: absolute;
background-color: $base-color; background-color: $base-color;
cursor: wait; }
img { @-webkit-keyframes uil-ring-anim {
position: absolute; 0% {
left: 50%; -ms-transform: rotate(0deg);
margin-left: -128px; -moz-transform: rotate(0deg);
top: 100px; -webkit-transform: rotate(0deg);
} -o-transform: rotate(0deg);
font { transform: rotate(0deg);
font-family: 'Josefin Sans', sans-serif; }
font-size: 150px; 100% {
top: 30%; -ms-transform: rotate(360deg);
color: #FFF; -moz-transform: rotate(360deg);
position: absolute; -webkit-transform: rotate(360deg);
width: 100%; -o-transform: rotate(360deg);
height: 120px; transform: rotate(360deg);
line-height: 132px;
text-align: center;
} }
} }
.sk-folding-cube { @-webkit-keyframes uil-ring-anim {
top: 50%; 0% {
left: 50%; -ms-transform: rotate(0deg);
width: 80px; -moz-transform: rotate(0deg);
height: 80px; -webkit-transform: rotate(0deg);
margin-left: -40px; -o-transform: rotate(0deg);
position: absolute; transform: rotate(0deg);
-webkit-transform: rotateZ(45deg); }
transform: rotateZ(45deg); 100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
} }
@-moz-keyframes uil-ring-anim {
.sk-folding-cube .sk-cube { 0% {
float: left; -ms-transform: rotate(0deg);
width: 50%; -moz-transform: rotate(0deg);
height: 50%; -webkit-transform: rotate(0deg);
position: relative; -o-transform: rotate(0deg);
-webkit-transform: scale(1.1); transform: rotate(0deg);
-ms-transform: scale(1.1); }
transform: scale(1.1); 100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
} }
.sk-folding-cube .sk-cube:before { @-ms-keyframes uil-ring-anim {
content: ''; 0% {
position: absolute; -ms-transform: rotate(0deg);
top: 0; -moz-transform: rotate(0deg);
left: 0; -webkit-transform: rotate(0deg);
width: 100%; -o-transform: rotate(0deg);
height: 100%; transform: rotate(0deg);
background-color: #FFF; }
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; 100% {
animation: sk-foldCubeAngle 2.4s infinite linear both; -ms-transform: rotate(360deg);
-webkit-transform-origin: 100% 100%; -moz-transform: rotate(360deg);
-ms-transform-origin: 100% 100%; -webkit-transform: rotate(360deg);
transform-origin: 100% 100%; -o-transform: rotate(360deg);
} transform: rotate(360deg);
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
} 25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
} 90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
} }
} }
@-moz-keyframes uil-ring-anim {
@keyframes sk-foldCubeAngle { 0% {
0%, 10% { -ms-transform: rotate(0deg);
-webkit-transform: perspective(140px) rotateX(-180deg); -moz-transform: rotate(0deg);
transform: perspective(140px) rotateX(-180deg); -webkit-transform: rotate(0deg);
opacity: 0; -o-transform: rotate(0deg);
} 25%, 75% { transform: rotate(0deg);
-webkit-transform: perspective(140px) rotateX(0deg); }
transform: perspective(140px) rotateX(0deg); 100% {
opacity: 1; -ms-transform: rotate(360deg);
} 90%, 100% { -moz-transform: rotate(360deg);
-webkit-transform: perspective(140px) rotateY(180deg); -webkit-transform: rotate(360deg);
transform: perspective(140px) rotateY(180deg); -o-transform: rotate(360deg);
opacity: 0; transform: rotate(360deg);
}
}
@-webkit-keyframes uil-ring-anim {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes uil-ring-anim {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
} }
} }
@keyframes uil-ring-anim {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.uil-ring-css {
background: url('../resources/Icon.png') no-repeat center center;
background-size: 160px 160px;
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
.uil-ring-css > div {
position: absolute;
display: block;
width: 160px;
height: 160px;
top: 20px;
left: 20px;
border-radius: 80px;
box-shadow: 0 6px 0 0 #07a6cb;
-ms-animation: uil-ring-anim 1s linear infinite;
-moz-animation: uil-ring-anim 1s linear infinite;
-webkit-animation: uil-ring-anim 1s linear infinite;
-o-animation: uil-ring-anim 1s linear infinite;
animation: uil-ring-anim 1s linear infinite;
}
// Badge Plugin for Tabs // Badge Plugin for Tabs
.x-badge { .x-badge {

Write Preview
Loading…
Cancel
Save