Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a preloader with CSS?
A preloader as the name suggests loads when the web page is loaded. Consider it as a loading page or a loading screen before the content on the web page is visible. With CSS, we can easily create a preloader and can also style it using the border properties. The animation for the loader is set with keyframes.
Syntax
.loader {
border: size style color;
border-radius: 50%;
animation: name duration timing-function iteration-count;
}
@keyframes name {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Style the loader
To style the loader, the border properties are used. The height and width are also set −
.loader {
border: 16px double #ffee00;
border-radius: 50%;
border-top: 16px solid #7434db;
width: 140px;
height: 140px;
animation: loader 2s linear infinite;
}
Animate the loader
To animate the loader, we have used the animation property. The name of the animation is set to loader. For spinning it forever, infinite animation is set −
animation: loader 2s linear infinite;
Set the loader animation
The rotation for the animation is set using the rotate() method. The rotate() is set using the CSS transform property. For 0%, the degree is set to 0 degrees, whereas for 100%, the degree is set 360 degrees −
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Example: Circular Preloader
The following example creates a spinning circular preloader with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px;
}
.loader {
border: 16px double #ffee00;
border-radius: 50%;
border-top: 16px solid #7434db;
width: 140px;
height: 140px;
animation: loader 2s linear infinite;
margin: 20px 0;
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h1>Creating a Preloader Example</h1>
<div class="loader"></div>
<p>Loading...</p>
</body>
</html>
A yellow circular loader with a purple top border spins continuously. The loader appears centered on the page with "Creating a Preloader Example" as the heading and "Loading..." text below it.
Example: Dot Preloader
Here's another preloader design using animated dots −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px;
background-color: #f0f0f0;
}
.dot-loader {
display: flex;
gap: 10px;
}
.dot {
width: 20px;
height: 20px;
background-color: #3498db;
border-radius: 50%;
animation: bounce 1.4s ease-in-out infinite both;
}
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
</style>
</head>
<body>
<h1>Dot Preloader</h1>
<div class="dot-loader">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</body>
</html>
Three blue dots bounce in sequence, creating a wave-like loading animation. Each dot scales from small to large and back with different timing delays.
Conclusion
CSS preloaders enhance user experience by providing visual feedback during page loading. Use border properties and keyframe animations to create spinning circles, or experiment with different shapes and effects for unique loading indicators.
416 Views
