”;
CSS loaders are animation effects that are used to indicate the loading process of a webpage. They are implemented using CSS and can be applied to various elements on a webpage, such as a spinner or a loading progress. CSS loaders are commonly used to improve user experience by visually indicating that content is being loaded or processed.
Sample of CSS Loaders
Here you can see what is a CSS loader, you may have seen these kind of loading animation on different websites.
Table of Contents
How to Create a CSS Loader?
To create a loader in CSS, follow the below mentioned steps steps.
- Create the HTML Structure: Define a outer div container element to hold loader content and a inner div container for loader.
- Style the Loader Container: Set up the width and height for loader container. Use flex layout to center loader elements properly inside the container.
- Style the Loader Element: Set up height and width for loader element also. Then set up border-top property as per width and color of loader you want. Also use border-radius value as 50% to ensure a circular loader.
- Add Animation to the Loader: Use CSS animation to create the loading effect. With this you can add rotation effect, scaling, or any other transformations.
- Define Keyframes for Animation: Specify the @keyframes rules for your animation, detailing how the loader should move or change over time.
You may use various color combinations, shape, patterns and animation tricks for the loader. Play around with CSS properties to create your loader.
You need to add the -webkit- prefix in your code for the browsers that do not support the animation and transform properties.
Basic CSS Loaders Example
Following example demonstrates creating a loader using CSS as discussed in the previous section:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 150px;
background-color: #e0f7e9;
margin: 0;
}
.loader {
border: 8px solid #e0f7e9;
border-top: 8px solid #34a853;
border-radius: 50%;
width: 60px;
height: 60px;
animation: innerFrame-spin 2s ease infinite;
}
@keyframes innerFrame-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="loader"> </div>
</div>
</body>
</html>
Create Pulsing Dots Loader
The pulsing dots loader is commonly used in windows operating system while booting the system. We made this using six div elements inside loader each set with different animation delay using pseudo-class :nth-child.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 150px;
background-color: #e0f7e9;
margin: 0;
}
.PulsingDotsLoader {
display: flex;
justify-content: space-around;
align-items: center;
width: 60px;
height: 60px;
}
.PulsingDotsLoader div {
width: 12px;
height: 12px;
background-color: #34a853;
border-radius: 50%;
animation: PulsingDotsLoader-animation 1.2s ease infinite;
}
.PulsingDotsLoader div:nth-child(1) {
animation-delay: -0.6s;
}
.PulsingDotsLoader div:nth-child(2) {
animation-delay: -0.5s;
}
.PulsingDotsLoader div:nth-child(3) {
animation-delay: -0.4s;
}
.PulsingDotsLoader div:nth-child(4) {
animation-delay: -0.3s;
}
.PulsingDotsLoader div:nth-child(5) {
animation-delay: -0.2s;
}
.PulsingDotsLoader div:nth-child(6) {
animation-delay: -0.1s;
}
@keyframes PulsingDotsLoader-animation {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(0.5);
opacity: 0.3;
}
}
</style>
</head>
<body>
<div class="container">
<div class="PulsingDotsLoader">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
</body>
</html>
Different Types of Spinning Loaders
This example shows loaders with multiple spinners.
- First loader have two spinners, because we defined properties border-top and border-bottom.
- For second loader we defined border-right along with previously defined top and bottom values, this make three spinner loader.
- And for third loader we defined four different values for border property, which makes a four spinner loader.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: space-around;
align-items: center;
height: 200px;
background-color: #f0f0f0;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid blue;
border-bottom: 16px solid blue;
border-radius: 50%;
width: 70px;
height: 70px;
animation: spin 2s linear infinite;
}
.second{
border-right: 16px solid blue;
}
.third{
border-top: 16px solid #ADD8E6; /* Light Blue */
border-right: 16px solid #87CEEB; /* Sky Blue */
border-bottom: 16px solid #1E90FF; /* Dodger Blue */
border-left: 16px solid #4169E1; /* Royal Blue */
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loader"> </div>
<div class="loader second"> </div>
<div class="loader third"> </div>
</body>
</html>
CSS Loaders Using Gradient
CSS gradients can be used to design custom colors for loader elements by creating a smooth transition between two or more colors.
Example
<html>
<head>
<style>
.loader-test {
width: 50px;
height: 50px;
padding: 10px;
aspect-ratio: 1;
border-radius: 50%;
margin: 20px;
background: linear-gradient(10deg,#ccc,red);
mask: conic-gradient(#0000,#000),
linear-gradient(#000 0 0)
content-box;
-webkit-mask-composite: source-out;
mask-composite: subtract;
animation: load 1s linear infinite;
}
@keyframes load {
to{
transform: rotate(1turn)
}
}
</style>
</head>
<body>
<div class="loader-test"> </div>
</body>
</html>
”;