CSS Loader

How to make simple CSS loader?

CSS Loader? All of you are aware of the preloaders on web pages. We use preloader to show that the data is loader. Essentially, preloaders or loaders are what you see on the screen while the rest of the page’s content is still loading. Preloaders are often simple or complex animations that are used to keep visitors entertained while server operations finish processing.

CSS loader

Why a preloader is needed on your pages?

Preloaders are important interface elements that let visitors know that the website is processing data. In other way it is telling the user that the page or data is still loading. So wait for the page to load full. Look for more attractive CSS animated Loaders.

Interesting animations can keep your users engaged while they’re waiting for the page to load. May be good animated preloaders helps the user to think about the animations for a few seconds, and by that time page loads. Then the user wont be irritated by the loading time.

Since there is an important role for the preloader on a web page, we will see how to make a simple css loader only with css.

Simple CSS Loader with css3 animation property

Previously we were using gif images, flash files or complex javascript for animated gifs.When we think about preloaders, so many fancy preloaders will be coming to your mind. But how to make a simple loader only with css? As a first step we will see a very simple css loaders.
We will add the html for the loader.

HTML for CSS loader

<div class="css-loader"></div>

CSS for CSS loader

.css-loader {
    border: 16px solid #f3f3f3; 
    border-top: 16px solid blue; 
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: spin 2s linear infinite;

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }

We will see the explanation for the example. We will add a single div element for creating the pre loader.
The border property specifies the border size and the border color of the loader. The border-radius property transforms the loader into a circle.

The border-top property is used for adding the blue line that spins around inside the border.

The size of the loader can be adjusted with the width and height properties.

Second sextion of the css is for the animation that makes the blue thing spin forever with a 2 second animation speed.

We are done with the basic css loader. Now we see how to style the loader in an attractive way.

CSS Loader demo

More style for the Loader

How we can make this pre loader more attractive? The simple way is to add borders for the css-loader class. So the following css will do the work for us.

.css-loader {
    	border-top: 16px solid #4285F4;
 	border-right: 16px solid #0F9D58;
 	border-bottom: 16px solid #F48400;
	border-left: 16px solid #DB4437;

Here we are just adding borders to the div element. Different colors for the borders.

Read More about CSS preloaders here

label, , , , ,

About the author