Snippet O’ the Week: CSS3 Loading Animation (Chrome Only)
This is a very cool snippet, I found it on HTML5Snippets.com, and it’s pretty sweet. Haven’t really used it yet, still trying to find a place to use it, probably throw on this blog for loading images but I just need to get off my duff and do it. If you decide to use it for something drop me a comment or hit me up on twitter so I can see it in action in one of your projects.
The snippet is below – by Ben Parker, @parkji, http://html5snippets.com/snippets/28-css3-loading-animation#
Here’s the snippet:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<style type='text/css'>
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#loading {
border: 1px solid #000;
border-right: 0;
border-bottom: 0;
-webkit-border-radius: 100px;
height: 100px;
width: 100px;
margin: 100px;
-webkit-transition: all 0.5s ease-in;
-webkit-animation-name: rotate;
-webkit-animation-duration: 1.0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
</style>
</head>
<body>
<div id="loading"></div>
</body>
</html>
|
