How to Create Animated Pre-loaders using only CSS3

How to Create Animated Pre-loaders using only CSS3

The modern, lightweight alternative to animated image pre-loaders

Pre-loaders are essential on the web, they enhance the user experience by providing visual feedback to the user whilst waiting for content to load. CSS3 pre-loaders are an alternative to image based pre-loaders and have the advantage of being scalable and Retina ready.

A pre-loader is a simple animation which is small enough to be displayed instantly, whilst other content is being loaded. Pre-loaders are often used when dynamically loading page content or processing server side operations to indicate progress. The .gif filetype is typically used for pre-loaders, due to the compressed file size and support for animation. But now with CSS3 we have an even easier, more lightweight method at our disposal which doesn't rely on any image assets. Here are 5 examples of pre-loaders that have been created using only HTML5 and CSS3. The code samples provided do not include vendor prefixes such as -webkit- and -moz-.

Pre-loader 1 - Double Spinner

Two spinning circles, rotating in opposite directions. The inner circle spins twice as fast as the outer circle, which is defined in the CSS with a shorter animation speed on the inner circle.

Example

The HTML

<body style="background-color: #ffb83c;">
	<div id="preloader-1">
		<span></span>
		<span></span>
	</div>
</body>

The CSS

#preloader-1 {
	position:relative;
}
#preloader-1 span {
	position:absolute;
	border: 8px solid #fff;
	border-top: 8px solid transparent;
	border-radius:999px;
}

#preloader-1 span:nth-child(1){
	width:80px;
	height:80px;
	animation: spin-1 2s infinite linear;
}
#preloader-1 span:nth-child(2){
	top: 20px;
	left: 20px;
	width:40px;
	height:40px;
	animation: spin-2 1s infinite linear;
}
@keyframes spin-1 {
	0% {transform: rotate(360deg); opacity: 1;}
	50% {transform: rotate(180deg); opacity: 0.5;}
	100% {transform: rotate(0deg); opacity: 1;}
}
@keyframes spin-2 {
	0% {transform: rotate(0deg); opacity: 0.5;}
	50% {transform: rotate(180deg); opacity: 1;}
	100% {transform: rotate(360deg); opacity: 0.5;}
}

Pre-loader 2 - Crossing Circles

Two circles which overlap each other as they go back and forth. A separate animation is defined for each circle to reverse the direction of travel.

Example

The HTML

<body style="background-color: #4ad3b4;">
	<div id="preloader-2">
		<span></span>
		<span></span>
	</div>
</body>

The CSS

#preloader-2 {
	position:relative;
}
#preloader-2 span {
	position:absolute;
	width:30px;
	height:30px;
	background: #fff;
	border-radius:999px;
}
#preloader-2 span:nth-child(1) {
	animation: cross-1 1.5s infinite linear;
}
#preloader-2 span:nth-child(2) {
	animation: cross-2 1.5s infinite linear;
}
@keyframes cross-1 {
	0% {transform: translateX(0px); opacity: 1;}
	50% {transform: translateX(80px); opacity: 0.5;}
	100% {transform: translateX(0px); opacity: 1;}
}
@keyframes cross-2 {
	0% {transform: translateX(80px); opacity: 1;}
	50% {transform: translateX(0px); opacity: 0.5;}
	100% {transform: translateX(80px); opacity: 1;}
}

Pre-loader 3 - Circle Rotator

A more traditional circular pre-loader. In this example the entire #preloader-3 container div is rotating rather than just solid white section.

Example

The HTML

<body style="background-color: #ab69d9;">
	<div id="preloader-3">
		<span></span>
	</div>	
</body>

The CSS

#preloader-3 {
	position:relative;
	animation: rotate 1s infinite linear;
	border: 4px solid rgba(255, 255, 255, .25);
	width: 80px;
	height: 80px;
	border-radius: 999px;
}
#preloader-3 span {
	position:absolute;
	width:80px;
	height:80px;
	border: 4px solid transparent;
	border-top: 4px solid #fff;
	top: -4px;
	left: -4px;
	border-radius:999px;
}
@keyframes rotate {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

Pre-loader 4 - Bouncing Circles

A Mexican wave style effect which is created by delaying the start of the animation with the animation-delay property.

Example

The HTML

<body style="background-color: #c1d64a;">
	<div id="preloader-4">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</body>

The CSS

#preloader-4 {
	position:relative;
}
#preloader-4 span {
	position:absolute;
	width:16px;
	height:16px;
	background: #fff;
	border-radius: 999px;
	animation: bounce 1s infinite linear;
}
#preloader-4 span:nth-child(1) {
	left: 0px;
	animation-delay: 0s;
}
#preloader-4 span:nth-child(2) {
	left: 20px;
	animation-delay: 0.25s;
}
#preloader-4 span:nth-child(3) {
	left: 40px;
	animation-delay: 0.5s;
}
#preloader-4 span:nth-child(4) {
	left: 60px;
	animation-delay: 0.75s;
}
#preloader-4 span:nth-child(5) {
	left: 80px;
	animation-delay: 1s;
}

@keyframes bounce {
	0% {transform: translateY(0px); opacity: 0.5;}
	50% {transform: translateY(-30px); opacity: 1;}
	100% {transform: translateY(0px); opacity: 0.5;}
}

Preloader 5 - Radar

A radar style effect, 3 span elements with the same expand and fade effect, each delayed slightly.

Example

The HTML

<body style="background-color: #f9553f;">
	<div id="preloader-5">
		<span></span>
		<span></span>
		<span></span>
	</div>
</body>

The CSS

#preloader-5 {
	position:relative;
}

#preloader-5 span {
	position:absolute;
	width:50px;
	height:50px;
	border: 5px solid #fff;
	border-radius:999px;
	animation: radar 2s infinite linear;
	opacity: 0;
}

#preloader-5 span:nth-child(1) {
	animation-delay: 0s;
}	
#preloader-5 span:nth-child(2) {
	animation-delay: 0.66s;
}
#preloader-5 span:nth-child(3) {
	animation-delay: 1.33s;
}
						
@keyframes radar {
	0% {transform: scale(0); opacity: 0;}
	25% {transform: scale(0); opacity: 0.5;}
	50% {transform: scale(1); opacity: 1;}
	75% {transform: scale(1.5); opacity: 0.5;}
	100% {transform: scale(2); opacity: 0;}
}

Conclusion

By using these techniques you should now understand the basics of creating CSS pre-loaders and be able to build your own. It is extremely fun to experiment with different effects, and just see what happens! The examples in this tutorial are relatively tame but trust me, it is possible to create some extremely 'interesting' animations.

Comments

X

You've successfully logged in!