"Loading icon" or "Loader" are frequently used in web applications to show, the complex process is running behind the screen. Mostly, GIF images are used to create loader but they can be heavy and take the time to load in the browser.So one of the best alternative to avoid heavy GIF is using CSS to create loader.
In this post, I will show you how to create the loader for your application using CSS. Let us start step by step
STEP 1: Add loader div inside <body> tag
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="loader"></div>
<div class = "loadText">Loading..</div>
</body>
</html>
STEP 2: Add given CSS inside <style> tag or in CSS file where you are managing your CSS.
.loader {
margin: 50px;
border: 5px solid #ebeef0;
border-radius: 50%;
border-top: 5px solid #0BDAA1;
width: 100px;
height: 100px;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loadText{
font-size: 20px;
margin-left: 70px;
color: blue;
}
STEP 3: Save and load this in browser
Here is the output you will get into your browser.
Now understand what CSS is doing in this code.
Circle for loader is created using "border-radius : 50%" and Green color loading part is created using "border-top: 5px solid #0BDAA1;" where 5px is border size.remaining loading part is created using "border: 5px solid #ebeef0;" .
Next is animation, which is responsible for spinning the loader with 1-second animation speed for forever and "@keyframes spin" defines the rule for the loader.
To experiment with the loader you can give border-left,border-right, border-bottom and border-top altogether or with any combination.
Click here to see working example.
View Demo
I hope you learned something and enjoyed the post.
In this post, I will show you how to create the loader for your application using CSS. Let us start step by step
STEP 1: Add loader div inside <body> tag
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="loader"></div>
<div class = "loadText">Loading..</div>
</body>
</html>
STEP 2: Add given CSS inside <style> tag or in CSS file where you are managing your CSS.
.loader {
margin: 50px;
border: 5px solid #ebeef0;
border-radius: 50%;
border-top: 5px solid #0BDAA1;
width: 100px;
height: 100px;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loadText{
font-size: 20px;
margin-left: 70px;
color: blue;
}
STEP 3: Save and load this in browser
Here is the output you will get into your browser.
Now understand what CSS is doing in this code.
Circle for loader is created using "border-radius : 50%" and Green color loading part is created using "border-top: 5px solid #0BDAA1;" where 5px is border size.remaining loading part is created using "border: 5px solid #ebeef0;" .
Next is animation, which is responsible for spinning the loader with 1-second animation speed for forever and "@keyframes spin" defines the rule for the loader.
To experiment with the loader you can give border-left,border-right, border-bottom and border-top altogether or with any combination.
Click here to see working example.
View Demo
I hope you learned something and enjoyed the post.
0 on: "Create Loading icon using CSS"