Tutorial Details
- Difficulty: Beginner
- Technology: CSS3
- Supported Browser: Chrome 5+, Safari 4+, iOS Safari 2.0
In this tutorial, we are going to create an animated spinner fully with CSS3. Yeah, no need to include JavaScript at all, what we need is just CSS3 already enough! Ok, let’s start our tutorial. First of all prepare a PNG image with transparent background, you can draw yourself or use the following image and save it as “spinner.png“:
HTML Structure
Well, the HTML structure of the spinner is very simple and easy! What you need to do is just to write a <div> tag and assign an id called “spinner” to it as shown below:
[xhtml]
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3: Spinner Animation | onlyWebPro.com</title>
</head>
<body>
<div id="spinner"></div>
</body>
</html>
[/xhtml]
That’s all for the HTML structure. Let’s move on to the CSS section.
CSS
Let’s define the style of our spinner with the following css:
[css]
<style>
#spinner {
position: absolute;
top: 50%;
left: 50%;
height: 128px;
width: 128px;
-webkit-mask-image: url(spinner.png);
background-color: #000;
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
</style>
[/css]
As you can see above, we have define several properties that with prefix “-webkit“.
- -webkit-mask-image: Link the PNG image we created earlier to “#spinner”.
- -webkit-animation-name: The name of the animation. The name is used to select the -webkit-keyframe at-rule that provides the keyframes and property values for the animation.
- -webkit-animation-duration: The duration of the animation. In this case, we set it for 2 seconds.
- -webkit-animation-iteration-count: Specifies the number of times an animation iterates. We set “infinite” for this case.
- -webkit-animation-timing-function: Defines animation progresses between key frames. Values available are linear, ease-in, ease-out and ease-in-out.
Cool, you have link the spinner PNG image to the div with id “#spinner“, but now we don’t see any animation on our page yet, let’s define the “spinnerRotate” that we have declares in “-webkit-animation-name”:
[css]
@-webkit-keyframes spinnerRotate {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
[/css]
As you can see from above, our spinner will start rotate at 0 degrees, and end at 360 degrees, over a time span of 2 seconds and the animation will keep repeating until user close the page.
Final Code
[xhtml]
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3: Spinner Animation | onlyWebPro.com</title>
<style>
#spinner {
position: absolute;
top: 50%;
left: 50%;
height: 128px;
width: 128px;
-webkit-mask-image: url(spinner.png);
background-color: #000;
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes spinnerRotate {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div id="spinner"></div>
</body>
</html>
[/xhtml]
That’s all, save your document and preview it on webkit browser (Safari 4.0, iOS Safari 2.0 or Chrome), you should see an animated spinner!