Concentric loader
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="loader.css">
<title>Loader</title>
</head>
<body>
<div class="mainLoader text-center">
<div class="loader">
</div>
<div class="middle-loader">
</div>
<div class="inner-loader"></div>
</div>
</body>
</html>CSS file
.mainLoader{
width: 150px;
height: 150px;
position: absolute;
top:40%;
left: 40%;
}
.loader{
width: 110px;
height:110px;
border-left: 4px solid #38ff8e;
border-radius: 50%;
position: absolute;
animation : loaderAnimation 0.9s linear infinite
}
.middle-loader{
width: 70px;
height:70px;
border-right: 4px solid red;
border-radius: 50%;
position: absolute;
top:25px;
left:25px;
animation : loaderAnimationOps 0.9s linear infinite
}
.inner-loader{
width: 30px;
height:30px;
border-top: 4px solid blue;
border-radius: 50%;
position: absolute;
top:40px;
left:40px;
animation : loaderAnimation 0.9s linear infinite
}
@keyframes loaderAnimation{
0% {
transform: rotate3d(10, 20, 0, 0deg)
}
50% {transform: rotate(180deg)}
100%{transform: rotate(360deg)}
}
@keyframes loaderAnimationOps{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(-180deg);
}
100%{
transform: rotate(-360deg);
}
}A loader, often referred to as a spinner or loading animation, is a visual indicator used to convey to users that a web page or application is processing or fetching data. It serves as a visual cue to reassure users that their request is being attended to, especially in situations where there might be a delay in loading content.
Creating a loader in CSS involves the use of keyframe animations, transformations, and styling properties. The loader typically consists of one or more animated elements that give the illusion of motion while the content is being loaded in the background.
Here’s a breakdown of the key components commonly used to create loaders in CSS:
- Element Structure:
- Loaders are often constructed using one or more HTML elements, usually with circular or linear shapes to create a visually appealing animation.
- Styling:
- CSS is used to define the size, shape, and color of the loader elements. Borders, background colors, and other stylistic properties are adjusted to achieve the desired appearance.
- Keyframe Animations:
- Keyframe animations are employed to define the sequence of frames in the loader animation. These animations specify how the loader element(s) should transform or move over a set duration.
- Transformations:
- Transformations, such as rotation or scaling, are often applied to create dynamic movement in the loader. These transformations are keyframed to provide a smooth and continuous animation loop.
- Positioning:
- Absolute or relative positioning is used to place the loader elements within a container or on the page. This allows the loader to be positioned appropriately in relation to other content.
