Table of Contents
Introduction
CSS stands for Cascading Style Sheet. This language is used for the styling of the Web Pages. CSS is responsible for the look of a Website. In the current time, it very important to make a website attractive. Your website must look great and attractive. It should be user friendly also. These things are very important to get a good amount of traffic in your website. CSS can help you in the styling purpose.
CSS code can be used with HTML5 code. You can enter CSS codes directly into an HTML5 document or you can create a CSS file separately and connect it with your HTML5 document. You can show your creativity with CSS styling codes.
Page Loader is a good option to give a beautiful and standard look to your website. A page loader will tell your users to wait till the page loads all the contents. If your hosting is a normal shared hosting, then your website many take a bit more time to load the contents of a web page. In such cases, CSS loader is a good option to cover up this delay. It looks good in such conditions.
CSS is a good option to design your page loader. You can set the shape, color and size of the loader with the help of CSS. You also can set the time period of the movement of the page loader. Instead of page loading, this loader can be used in other purposes also.
Working
A page loader can be used in the time of loading your web page. If you put a lot of content in a single web page then it may take a longer time to load. In such cases, a page loader can be used. It will tell your users to wait for some time till the page loads. A CSS loader can be used for other purposes also such as image loader, data loader, loader for record update etc.
Types of Codes Used
To insert a CSS page loader, we must need HTML5 as it is the base language. CSS can be used for the styling of the loader. Along with these, you must need JavaScript and JQUERY for client side scripting. JavaScript & JQUERY will work as an interface between the HTML5 document and the CSS loader. These will tell the loader when to start and when to stop. Overall, it can be said that, JavaScript and JQUERY will make the loader working. You will need to add JQUERY CDN in your HTML document. To do so, you can visit this link. Copy the minified code of the latest version of CDN. Come back to your HTML document and paste the CDN code within <head> and </head> tags.
Method
Firstly, we need to create an HTML file on which the loader will be added. For now, I am just showing you by making a simple HTML page. The HTML code is given below –
<!DOCTYPE html> <html> <head> <title>CSS Page Loader</title> </head> <body onload="loaderFun()"> <center> <h2>CSS Page Loader</h2> <p> <img src="image.png" alt="Image" height="200px" width="300px"> <p> <span>Page Loaded Successfully...</span> </center> </body> </html>
The HTML Page will look like this –
Now, the time to design the loader in CSS. Before that, we need to create the loader in HTML. Then we can apply CSS code on this. We should create the background of the loader first, then the loader can be created. The background will be a fixed display div which will cover the whole web page. Over that background, the circular div will be created which will work as a loader. The HTML code can be entered before the </body> tag. The code is given below –
<div class="background"> <div class="loader"></div> <p> <span>Please Wait...</span> </div>
CSS code for the Loader is given below –
<style type="text/css">
.background{
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
width: 100%;
height: 100%;
background: #fff;
left: 0;
top: 0;
}
.loader{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 50%;
border-top: 5px solid red;
border-left: 5px solid red;
border-right: 5px solid #888;
border-bottom: 5px solid #888;
animation: rotate 0.5s linear infinite;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
The CSS Loader will look like this –
Now, the last part. In this part, you should apply a JavaScript & JQUERY code to make it a working one. The JQUERY Code will start the loader and make it visible on the ready event of the document. It is a very simple code. The code is written below –
<script type="text/javascript">
$(document).ready(function(){
document.getElementsByClassName("background")[0].style.display = "flex";
});
</script>
JavaScript code will stop the loader make it invisible. A JavaScript function has been added in the onload event of the <body> tag. A simple code should be added within the function to disable the loader and make it invisible when the page is being loaded. The JavaScript code can be written in the following way –
<script type="text/javascript">
function loaderFun(){
document.getElementsByClassName("background")[0].style.display = "none";
}
</script>
That’s all. The over all code is given below –
<!DOCTYPE html>
<html>
<head>
<title>CSS Page Loader</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style type="text/css">
.background{
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
width: 100%;
height: 100%;
background: #fff;
left: 0;
top: 0;
}
.loader{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 50%;
border-top: 5px solid red;
border-left: 5px solid red;
border-right: 5px solid #888;
border-bottom: 5px solid #888;
animation: rotate 0.5s linear infinite;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
<script type="text/javascript">
function loaderFun(){
document.getElementsByClassName("background")[0].style.display = "none";
}
</script>
</head>
<body onload="loaderFun()">
<center>
<h2>CSS Page Loader</h2>
<p>
<img src="image.png" alt="Image" height="200px" width="300px">
<p>
<span>Page Loaded Successfully...</span>
</center>
<div class="background">
<div class="loader"></div>
<p>
<span>Please Wait...</span>
</div>
<script type="text/javascript">
$(document).ready(function(){
document.getElementsByClassName("background")[0].style.display = "flex";
});
</script>
</body>
</html>
Conclusion
It can be concluded that a CSS page loader is a very professional way to tell the visitors of a website to wait till the page is being loaded. It looks very beautiful and attractive in a web page. This simple loader can be used for another purpose of a website also.
Thank you.
