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. 20
      index.html
  2. 260
      packages/local/rambox-default-theme/sass/etc/all.scss

20
index.html
Unescape View File

@ -1,11 +1,11 @@
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Rambox</title> <title>Rambox</title>
<!-- The line below must be kept intact for Sencha Cmd to build your application --> <!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" type="text/javascript" src="bootstrap.js"></script> <script id="microloader" type="text/javascript" src="bootstrap.js"></script>
@ -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>

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

@ -7,121 +7,161 @@ $font-family: 'Roboto', sans-serif;
// Spinner // Spinner
body { body {
margin: 0; margin: 0;
background-color: $base-color;
}
@-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);
}
}
@-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);
}
}
@-moz-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);
}
}
@-ms-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);
}
}
@-moz-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);
}
} }
#spinner { @-webkit-keyframes uil-ring-anim {
width: 100%; 0% {
height: 100%; -ms-transform: rotate(0deg);
top: 0; -moz-transform: rotate(0deg);
z-index: 999999; -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; position: absolute;
background-color: $base-color; width: 200px;
cursor: wait; height: 200px;
img {
position: absolute;
left: 50%;
margin-left: -128px;
top: 100px;
}
font {
font-family: 'Josefin Sans', sans-serif;
font-size: 150px;
top: 30%;
color: #FFF;
position: absolute;
width: 100%;
height: 120px;
line-height: 132px;
text-align: center;
}
}
.sk-folding-cube {
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 80px; margin-left: -100px;
height: 80px; margin-top: -100px;
margin-left: -40px;
position: absolute;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
} }
.uil-ring-css > div {
.sk-folding-cube .sk-cube { position: absolute;
float: left; display: block;
width: 50%; width: 160px;
height: 50%; height: 160px;
position: relative; top: 20px;
-webkit-transform: scale(1.1); left: 20px;
-ms-transform: scale(1.1); border-radius: 80px;
transform: scale(1.1); box-shadow: 0 6px 0 0 #07a6cb;
} -ms-animation: uil-ring-anim 1s linear infinite;
.sk-folding-cube .sk-cube:before { -moz-animation: uil-ring-anim 1s linear infinite;
content: ''; -webkit-animation: uil-ring-anim 1s linear infinite;
position: absolute; -o-animation: uil-ring-anim 1s linear infinite;
top: 0; animation: uil-ring-anim 1s linear infinite;
left: 0;
width: 100%;
height: 100%;
background-color: #FFF;
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
animation: sk-foldCubeAngle 2.4s infinite linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.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;
}
}
@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;
}
} }
// Badge Plugin for Tabs // Badge Plugin for Tabs

Write Preview
Loading…
Cancel
Save