Skip to content

Instantly share code, notes, and snippets.

@40thieves

40thieves/index.html

Created April 30, 2013 19:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 40thieves/5491370 to your computer and use it in GitHub Desktop.
Save 40thieves/5491370 to your computer and use it in GitHub Desktop.
Download ZIP
Super simple css animation for adding some interest to loading screens
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="author" content="Alasdair Smith" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="loading-animation">
Loading
<span class="dot1">.</span>
<span class="dot2">.</span>
<span class="dot3">.</span>
</div>
</body>
</html>
Raw
style.css
.loading-animation {
position: absolute;
top: 50%;
left: 50%;
}
.loading-animation span {
position: relative;
-webkit-animation: upAnimation;
animation: upAnimation;
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.loading-animation .dot1 {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.loading-animation .dot2 {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.loading-animation .dot3 {
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
@-webkit-keyframes upAnimation {
0% { bottom: 0; }
25% { bottom: 6px; }
50% { bottom: 0; }
100% { bottom: 0; }
}
@keyframes upAnimation {
0% { bottom: 0; }
25% { bottom: 6px; }
50% { bottom: 0; }
100% { bottom: 0; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment