A loader is a visual indicator that informs the user that content is being loaded.
How to Create a simple Loader
Here's an example of how to create a loader in CSS using keyframe animations:
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h2>CSS Loader</h2>
<div class="loader"></div>
</body>
</html>Output:
How to Create a Loader with Multiple Colors
To create a loader with multiple colors in CSS, you can use a combination of CSS gradients and keyframe animations. Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
border-radius: 50%;
width: 50px;
height: 50px;
position: relative;
margin: 0 auto;
animation: spin 1s linear infinite;
}
.loader:before {
content: "";
display: block;
border-radius: 50%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to right, #ff5722, #f44336, #e91e63, #9c27b0, #673ab7, #3f51b5, #2196f3, #03a9f4, #00bcd4, #009688, #4caf50, #8bc34a, #cddc39, #ffeb3b, #ffc107, #ff9800, #ff5722);
animation: loader-colors 15s linear infinite;
background-size: 400% 400%;
}
@keyframes loader-colors {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h2>CSS Loader</h2>
<div class="loader"></div>
</body>
</html>Output:
The Tech Platform
Comments