Skip to content

Instantly share code, notes, and snippets.

@luggage66
Created April 20, 2015 16:50
Show Gist options
  • Save luggage66/43c353e5c024ae43ffc0 to your computer and use it in GitHub Desktop.
Save luggage66/43c353e5c024ae43ffc0 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>ace-app</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!--link(rel="icon", type="image/png", href=require('../public/favicon.png'))-->
<style type="text/css">
/* @ace-green: #60cd69;
@ace-blue-dark: #082b49;
@ace-blue: #252161; */
body {
background-color: rgb(246, 246, 246);
}
.app-loading h1 {
font-family: sans-serif;
color: #082b49;
font-size: 16px;
text-align: center;
}
.spinner {
margin: 100px auto;
width: 50px;
height: 30px;
text-align: center;
font-size: 10px;
}
.spinner > div {
background-color: #60cd69;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
</style>
</head>
<body data-bind="css: bodyClassNames" class="gt-ie9 main-navbar-fixed main-menu-fixed">
<div data-bind="visible: false" class="app-loading">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
<h1>Loading...</h1>
</div>
<!--input(type="text", id="testInput", data-bind="value: testValue" style="margin: 200px;")-->
<!--div(data-bind="css: testValue")-->
<div id="main-wrapper" data-bind="partial: 'views/app'"></div>
<script src="/assets/entry.client.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment