Skip to content

Instantly share code, notes, and snippets.

@rafszul
Last active April 27, 2017 21:11
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rafszul/cb1e5537123005bb72f5488b9413655f to your computer and use it in GitHub Desktop.
Save rafszul/cb1e5537123005bb72f5488b9413655f to your computer and use it in GitHub Desktop.
loader for angular apps
<!-- change 'app-root' tag and class -->
<body>
<app-root>
<style>
app-root {
background-image: url('/assets/gplaypattern_@2X.png');
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 5em;
color: #455A64;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
@keyframes dots {
50% {
transform: translateY(-.4rem);
}
100% {
transform: translateY(0);
}
}
.d {
animation: dots 1.5s ease-out infinite;
}
.d-2 {
animation-delay: .5s;
}
.d-3 {
animation-delay: 1s;
}
</style>
Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span>
</app-root>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment