Skip to content

Instantly share code, notes, and snippets.

@pavermakov

pavermakov/index.html

Created November 29, 2016 09:11
Show Gist options
  • Save pavermakov/9be62751da45f47c9799e4654c23bee8 to your computer and use it in GitHub Desktop.
Save pavermakov/9be62751da45f47c9799e4654c23bee8 to your computer and use it in GitHub Desktop.
Download ZIP
Simple loading animation ( Loading . . . )
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS ui</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Palanquin;
line-height: 1.618em;
background: #3498db;
color: #fff;
}
.wrapper {
max-width: 50rem;
width: 100%;
margin: 5rem auto;
text-align: center;
}
h1.loading {
font-size: 3em;
font-weight: 400;
}
span[class^='dot_']{
opacity: 0;
}
.dot_one{
animation: dot_one 2s infinite linear;
}
.dot_two{
animation: dot_two 2s infinite linear;
}
.dot_three{
animation: dot_three 2s infinite linear;
}
@keyframes dot_one {
0%{
opacity: 0;
}
15%{
opacity: 0;
}
25%{
opacity: 1;
}
100%{
opacity: 1;
}
}
@keyframes dot_two {
0%{
opacity: 0;
}
40%{
opacity: 0;
}
50%{
opacity: 1;
}
100%{
opacity: 1;
}
}
@keyframes dot_three {
0%{
opacity: 0;
}
65%{
opacity: 0;
}
75%{
opacity: 1;
}
100%{
opacity: 1;
}
}
</style>
</head>
<body>
<div class="wrapper">
<h1 class="loading">LOADING
<span class="dot_one"> .</span>
<span class="dot_two"> .</span>
<span class="dot_three"> .</span>
</h1>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment