Skip to content

Instantly share code, notes, and snippets.

@elialejandro

elialejandro/index.html

Created May 4, 2018 01:43
Show Gist options
  • Save elialejandro/9baf99918bc41e711ec4bbe2e4ffe1ca to your computer and use it in GitHub Desktop.
Save elialejandro/9baf99918bc41e711ec4bbe2e4ffe1ca to your computer and use it in GitHub Desktop.
Download ZIP
PageLoading
Raw
index.html
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" type="text/css">
<style type="text/css">
body, html {
height: 100%;
}
.app-loading {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.app-loading .spinner {
height: 200px;
width: 200px;
animation: rotate 2s linear infinite;
transform-origin: center center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.app-loading .spinner .path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
animation: dash 1.5s ease-in-out infinite;
stroke-linecap: round;
stroke: #ddd;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
</style>
</head>
<body class="bg-light">
<app-root> <!-- selector from app.component.ts -->
<!-- loading layout replaced by app after startupp -->
<div class="app-loading">
<div class="logo"></div>
<svg class="spinner" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>
</div>
</app-root>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment