Home » Tutorials » HTML & CSS » CSS3: Spinner Animation

CSS3: Spinner Animation

CSS3: Spinner Animation

  • Stumble it!
  • Share

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“:

Spinner

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:

<!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>

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:

<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>

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”:

@-webkit-keyframes spinnerRotate {
	from {
		-webkit-transform:rotate(0deg);
	}
	to {
		-webkit-transform:rotate(360deg);
	}
}

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

<!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>

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!

  • Create Banner Using CSS Animation & Keyframe
  • Create Stunning Animation Using CSS3 Animation & Keyframe
  • CSS3: Spinner Animation
  • Anonymous

    I cannot get the icon to spin

    • http://www.onlywebpro.com onlyWebPro

      Hi Susan,

      Thanks for your comment. There are few things you need to check, your browser version and your code. Could you describe more about your problem?

      Regards,
      The Management of onlyWebPro.com

      • Anonymous

        I got it going. The example was confusing. It caused me to put everything into one file twice.

      • http://www.onlywebpro.com onlyWebPro

        Hi Susan,

        Glad to hear that, you manage to solve it by yourself. I would like to apologize to you, due to the confusing that cause by the article.

        Regards,
        The Management of onlyWebPro.com

    • Anonymous

      I am using Google Chrome version 13.0.782.215 m

      The code was copies exactly. Were there some file formats that I needed to use?

  • ZigPress

    What about compatibility with the most widely used browsers – IE7 and IE8? No? Thought not…

  • H. P.

    Always… always provide working demo with tutorials.
    Otherwise, good one.

    • http://www.onlywebpro.com onlyWebPro

      Hi H.P.

      Thanks for your suggestion. We will improve it!

      Regards,
      The Management of onlyWebPro.com

  • Ali Jafri

    Can you add a demo to the tutorial ?

  • Hello

    You can also do a 90 deg turn for .5 sec

  • Tanna Ramesh

    …and what if I want to rotate it anticlockwise?

  • Fianna

    How can I change the color of the spinner?

  • http://twitter.com/aidanmack aidanmack

    Anyway to have it working as not a mask?

Most Popular