Simple Spinners Using Pure CSS
Posted By : Jayant Singh Parmar | 24-Jul-2018
In this blog we are goin to create simple spinners using pure css and a little bit of javascript and for that we will be having a pretty basic project setup. We will be having three files index.html(our main html page), main.css(our main style sheet) and main.js(main javascript file). In our HTML page we will be having an h1 and a paragraph but if we reload the page we can see a little spinner in the middle of the screen, it is going to stay there for 4 seconds and then it will load the paragraph.
What we are going to focus on is to building the spinner on pure css. We are not using any css frameworks on GIFs. We are actually going to create three different versions. It is goig to be very easy, quick and painless. So lets head over to our VS Code or any other editor of your choice. Our HTML markup is very simple, you can use emmet to create out HTML boilerplate and edit it as given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Spinners</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<h1>Spinners using pure css</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Facere assumenda recusandae quos quidem ducimus quod quae quia vitae nisi illum,
ipsum fugiat iure nam sequi? Molestias quam totam a veniam.
</p>
</div>
<script src="main.js"></script>
</body>
</html>
You can open this HTML using live server which I would highly recommend if you use VS Code. Now we will head over to our main.css and add the following piece of code.
/* Spinner 1 */
.spinner-1:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -30px;
margin-left: -30px;
border-radius: 50%;
border: 3px solid lightgray;
border-top-color: #cc000f;
animation: spinner 0.7s linear infinite;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
Similarly you create the remaining two types of spinners by adding the following code to your css file
/* Spinner 2 */
.spinner-2:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -30px;
margin-left: -30px;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: #cc000f;
border-bottom-color: #cc000f;
animation: spinner 0.7s ease infinite;
}
/* Spinner 3 */
.spinner-3:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -30px;
margin-left: -30px;
border-radius: 50%;
border-top: 2px solid #cc000f;
border-right: 2px solid transparent;
animation: spinner 0.7s linear infinite;
}
Now we will head over to our javascript file(main.js) and add the following script.
document.querySelector(".main p").style.display = "none";
document.querySelector(".main").classList.add("spinner-2");
// Mimic Server Request
setTimeout(() => {
document.querySelector(".main").classList.remove("spinner-2");
document.querySelector(".main p").style.display = "block";
}, 4000);
The above script displays the spinner first and after 4 seconds the it displays the paragraph just like an actual server request. For complete code I have attached the project zip file.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Jayant Singh Parmar
Jayant has more than 5+ years of industry experience as a frontend developer. He has good knowledge of technologies like Angular, reactJS, HTML, CSS, javascript etc. He is proficient in building complex UI designs, implentation of complex logics on frontend, API integrations, development and deployments and have been part of successfully delivering services on various client projects like Virgin Media, Hp1t and Jabburr He is a quick learner and keen to learn new technologies.