LAST UPDATED: AUGUST 5, 2021
How to create a pre-loader using CSS?
Preloader is used to show the loading process of a web page to the user. It is what we see on the website before the page loads. It is used to keep the users intact with the page till the contents load on the page. The preloader varies from website to website. This preloader is designed using CSS.
Pre-loader using CSS
The most common preloader are the spinners. To create a spinner, we add the following properties.
border property to add border size and border color to the spinners.- spinners are the circles so add
border-radius to add a circled border.
animation to add a spinning effect to the spinners.- The
height and width of the preloader.
- CSS transform property is added to rotate the spinners.
Example: Creating a spinner preloader
In this example, we have created a border spinner using the CSS properties.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.preloader {
border : 10px solid blue;
border-radius: 50%;
width: 50px;
height: 50px;
border-top: 10px solid gray;
border-bottom: 10px solid gray;
-webkit-animation: preloader 1s linear infinite;
animation: preloader 1s linear infinite;
}
@-webkit-keyframes preloader {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes preloader {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h2>Preloader</h2>
<div class="preloader">
</div>
</body>
</html>
Output
Here is the output of the above program
Example: Creating ease in and out spinner
We can modify animation value to ease-in-out to add spinner with ease in out effect.
Conclusion
We can create almost any type of preloader using the CSS properties. The two most important used in preloader are animation and transform property. Here, we have explained to create a simple border spinner.
