Skip to content

Instantly share code, notes, and snippets.

@jbottigliero

jbottigliero/gist:5972612

Created July 11, 2013 04:53
Show Gist options
  • Save jbottigliero/5972612 to your computer and use it in GitHub Desktop.
Save jbottigliero/5972612 to your computer and use it in GitHub Desktop.
Download ZIP
css loading indicator - http://codepen.io/anon/full/xwlFv
Raw
gistfile1.html
<html>
<head>
<style>
@-webkit-keyframes clockwise {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes counter-clockwise {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
}
}
body {
margin: 0;
padding: 0;
}
.loader {
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.85);
}
.loader div {
border: 5px solid;
border-radius: 100%;
height: 60px;
width: 60px;
position: relative;
left: 50%;
top: 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
border-top-color: rgba(255,255,255,.0125);
border-right-color: rgba(255,255,255,.25);
border-bottom-color: rgba(255,255,255,.05);
border-left-color: rgba(255,255,255,.5);
}
.loader div > div {
position: static;
}
#one, #three {
-webkit-animation-name: counter-clockwise;
}
#one {
-webkit-animation-duration: 2s;
}
#two {
height: 50px;
width: 50px;
-webkit-animation-name: clockwise;
-webkit-animation-duration: 2s;
-webkit-animation-delay: 3s;
}
#three {
height: 40px;
width: 40px;
-webkit-animation-duration: 5s;
}
</style>
</head>
<body>
<div class="loader">
<div id="one">
<div id="two">
<div id="three"></div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment