Added progress spinner to loading page
<meta name="apple-mobile-web-app-title" content="Kylo">
<meta name="application-name" content="Kylo">
+
+ <style>
+ .loader,
+ .loader:before,
+ .loader:after {
+ border-radius: 50%;
+ }
+ .loader {
+ color: #f2724b;
+ font-size: 11px;
+ text-indent: -99999em;
+ margin: 55px auto;
+ position: relative;
+ width: 10em;
+ height: 10em;
+ box-shadow: inset 0 0 0 1em;
+ -webkit-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ transform: translateZ(0);
+ }
+ .loader:before,
+ .loader:after {
+ position: absolute;
+ content: '';
+ }
+ .loader:before {
+ width: 5.2em;
+ height: 10.2em;
+ background: #ececec;
+ border-radius: 10.2em 0 0 10.2em;
+ top: -0.1em;
+ left: -0.1em;
+ -webkit-transform-origin: 5.2em 5.1em;
+ transform-origin: 5.2em 5.1em;
+ -webkit-animation: load2 2s infinite ease 1.5s;
+ animation: load2 2s infinite ease 1.5s;
+ }
+ .loader:after {
+ width: 5.2em;
+ height: 10.2em;
+ background: #ececec;
+ border-radius: 0 10.2em 10.2em 0;
+ top: -0.1em;
+ left: 5.1em;
+ -webkit-transform-origin: 0 5.1em;
+ transform-origin: 0 5.1em;
+ -webkit-animation: load2 2s infinite ease;
+ animation: load2 2s infinite ease;
+ }
+ @-webkit-keyframes load2 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+ @keyframes load2 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+ </style>
</head>
<body layout-fill style="background:#e0e0e0">
<index-controller>
<div style="padding: 20%;text-align:center;">
- <img src="assets/images/kylo-logo-orange.png" height="50px">
- <h3 style="color:rgba(0, 0, 0, 0.7)">Loading...</h3>
+ <img src="assets/images/kylo-logo-orange.png" style="width:300px;height:169px" alt="Kylo">
+ <div class="loader">Loading...</div>
</div>
</index-controller>
