CSS Loaders
CSS Loaders
CSS loaders are animated effects used to indicate the loading process of a web page. They are implemented using CSS and can be applied to various elements on a web page, such as spinners or progress bars. CSS loaders are often used to improve the user experience by visually indicating that content is loading or processing.
Here are several CSS properties used to create loaders:
- border : Specifies the size and color of the loader’s border.
- border-radius : Specifies the shape of the loader. For example, border-radius: 50% makes the loader circular.
- border-top, border-bottom, border-left, and/or border-right : Indicate the direction of the loader’s rotation.
- width : Specifies the width of the loader.
- height : Specifies the height of the loader.
- animation : Specifies the duration of the loader’s rotation.
- @keyframes : The @keyframes rule specifies animation rules. It can contain the keywords from and to , representing 0% and 100% respectively; 0% indicates the start of the animation, and 100% indicates the end.
- transform : The transform function is used to specify the loader’s rotation angle.
- mask/mask-composite : Used to create the loader’s final shape.
Add the -webkit- prefix to your code for browsers that don’t support the animation and transform properties.
Example
Here’s an example of creating a loader using CSS:
<html>
<head>
<style>
.loader-test {
border: 20px solid #110101;
border-radius: 60%;
border-top: 20px solid #f10c18;
border-right: 20px solid yellow;
border-bottom: 20px solid blue;
border-left: 20px solid green;
width: 50px;
height: 50px;
-webkit-animation: spin 5s linear infinite;
animation: spin 5s linear infinite;
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
</style>
</head>
<body>
<h2>CSS Loader</h2>
<div class="loader-test"></div>
</body>
</html>
Here’s an example of creating a loader using the border shorthand property border-right:
<html>
<head>
<style>
.loader-test {
border: 20px solid #110101;
border-radius: 60%;
border-right: 20px solid red;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
</style>
</head>
<body>
<h2>CSS Loader</h2>
<div class="loader-test"></div>
</body>
</html>
The following is an example of using the :before and :after attributes to create a loader:
<html>
<head>
<style>
.loader-test {
width: 100px; /* control the size */
aspect-ratio: 1;
-webkit-mask: conic-gradient(red, yellow, green);
mask: conic-gradient(red, yellow, green);
animation: spin 2s steps(12) infinite;
}
.loader,
.loader:before,
.loader:after{
background: conic-gradient(red, yellow, green);
}
.loader:before,
.loader:after{ content: "";
transform: rotate(30deg);
}
.loader:after{
transform: rotate(60deg);
}
@keyframes spin {
from {transform: rotate(0turn)}
to {transform: rotate(1turn)}
}
div {
margin: 20px;
width: 100px;
height: 100px;
place-content: center;
place-items: center;
}
</style>
</head>
<body>
<h2>CSS Loader</h2>
<div class="loader-test">
</div>
</body>
</html>
Always specify both the 0% and 100% selectors for best browser support.
The following is an example of creating a loader:
<html>
<head>
<style>
.loader-test {
width: 50px;
padding: 10px;
aspect-ratio: 1;
border-radius: 50%;
margin: 20px;
height: 50px;
background: linear-gradient(10deg,#ccc,red);
-webkit-mask: conic-gradient(#0000,#000), linear-gradient(#000 0 0) content-box;
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>
<h2>CSS Loader</h2>
<div class="loader-test"></div>
</body>
</html>
There are countless ways to create loading animations with CSS.