In this post, we will learn how to create CSS spinner loader. To create spinner loader in CSS is very easy task. If we have some basic knowledge of CSS then we can make it easily.


How To Create CSS Spinner Loader ?


Create CSS Spinner Loader

To create a spinner loader, we follow the following steps:

Step 1 : In this step we write HTML code. First we take a div and set its id loader. Now our HTML part is done.

<!DOCTYPE html>
<html>
<head>
<title>How To Create CSS Spinner Loader ?</title>
<styel>
/* CSS Code Here....*/

</style>
</head>
<body>

<div id="loader"></div>

</body>
</html> code-box

Step 2 : In this step we write CSS code. This step is very important. In this step we write following CSS code:


/* Set body background color to gray*/
body{background-color: gray;}

/* CSS for div which id is loader*/
#loader {

/* To center loader we write this following code*/
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
position:absolute;

/* Set loader background color transparent */
background-color: transparent;

/* Set height and width of the loader*/
width: 50px;
height: 50px;

/*To round the loader set border radius*/
border-radius: 50%;


/*Border width and color*/
border: 10px solid white;

/*Give top border color to visible loader*/
border-top-color: black;


/*For colorful loader you give also bottom,left and right color also.*/
/*
border-top-color: black;
border-bottom-color: red;
border-left-color: red;
border-right-color: green;
*/

/*To animate the loader make animation*/
animation: spinner 2s linear infinite;
}

/*Keyfrmaes for spinner*/
@keyframes spinner{
to{
transform: rotate(360deg);
}
} code-box

Copy this CSS code and paste in Step 1 HTML code and then our CSS spinner loader will be ready.


Output :



Summary

In this post we learn how to create CSS spinner loader. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post