Inspiration For Creative Minds
Home » Labs » Loading animation using CSS3 code with example  

Filed under Labs

This is a post on our lab which contain how to make loading animations using CSS. It uses CSS3 keyframes feature for making animation. you can change it according to your needs and almost modern browsers supports this. This is tested on latest version of Firefox, Chrome, Opera and IE. Below you can find code and after that there is also option for viewing live demo of this tutorial.

CSS

 
	#loading-1, #loading-2, #loading-3{
		float:left;
		width: 130px;
		height: 130px;
		margin:60px 0;
	}	
	#loading-1 {
		background: url('images/spinner1-130x130.png');
	}
	#loading-2 {
		background: url('images/spinner2-130x130.png');
	}
	#loading-3 {
		background: url('images/spinner3-130x130.png');
	}
	@keyframes rotating {
	  from {
		transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
	  }
	  to {
		transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
	  }
	}
	@-webkit-keyframes rotating /* Safari and Chrome */ {
	  from {
		transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
	  }
	  to {
		transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
	  }
	}
	.speed1 {
		-webkit-animation: rotating 2s linear infinite;
		-moz-animation: rotating 2s linear infinite;
		-ms-animation: rotating 2s linear infinite;
		-o-animation: rotating 2s linear infinite;
		animation: rotating 2s linear infinite;
	}	
	.speed2 {
		-webkit-animation: rotating 5s linear infinite;
		-moz-animation: rotating 5s linear infinite;
		-ms-animation: rotating 5s linear infinite;
		-o-animation: rotating 5s linear infinite;
		animation: rotating 5s linear infinite;
	}	
	.speed3 {
		-webkit-animation: rotating 8s linear infinite;
		-moz-animation: rotating 8s linear infinite;
		-ms-animation: rotating 8s linear infinite;
		-o-animation: rotating 8s linear infinite;
		animation: rotating 8s linear infinite;
	}

HTML

 
			<div style="width:40%; height:auto; margin: 0 auto;">
 
				<div id='loading-1' class='rotating speed1'></div>
				<div id='loading-2' class='rotating speed2'></div>
				<div id='loading-3' class='rotating speed3'></div>
 
			</div>

Live Demo

It's only fair to share...Share on Google+Tweet about this on TwitterShare on Facebook
Labs

Posts you may like: