In this article, we will learn how to create loading animation effects using css. So let’s know. That’s how we make a beautiful desin like this loading animation using css. So first of all you have to know that on what we are going to make it. First you have to choose any one code editor like Notepad, Sublime, Notepad++, Visual Studio Code. But we made this loading animation in visaul studio code editor.
If you also want to make loading animation in Visual Studio Code, then for that you have to go to the site of Visual Studio and by going there you have to download the Visual Studio software, after that you have to install it in your system. Then you have to open it. After opening, you have to select the new file by going to the right side, you can name it whatever you want. But remember, it has to put html in the last by putting a dot so that this file becomes an html file.
HTML for Structure
Here we will know how to use html for loading animation, so let’s know. First you have to open the file, after that you have to press control plus 1. Then the html syntax will be generated in front of you, after that you have to go to its head section and set the title, after that you have to come inside the body tag. And then you have to take div tag and save it by keeping its class circle. Then you have to take div tag again inside circle class. And the name of its class is to be named Loading. Again you have to take div tag. And the name of its class is to be named Light. After that you have to take pragrapgh tag, inside that you have to put loading text.
If you have not understood by reading this content of ours. So copy the html given below and paste it in your code editor so that your work becomes easy.
HTML Source Code..
<div class="circle">
<div class="loading"><div class="light"></div></div>
<p>Loading...</p>
</div>CSS for this Design
Now we will know how to use css. So first of all you have to know how we use css. So let’s know how to use it. We use css in three ways, first we also use it inline. And secondly we also use it internally. Thirdly, we also use it externally. But we have used css internally in this design. For that you have to go to your head section. And you have to type style, then the style tag will come in front of you, then closing it also has to be done. After this you have to take * inside it, then open and close curly braces. Then add margin 0 padding 0 box sizing border box something like this.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Then you have to take body tag and write some css in it like display flex, justify content center, align items center, min height 100vh background rga something like this.
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(80,80,80);
}
After this you have to take circle class and in that you have width 300, height 300, border radius 50%, background #212121, box shadow 0 0 40px rgba something like this.
.circle{
width: 300px;
height: 300px;
border-radius: 50%;
background: #212121;
box-shadow: 0 0 40px rgba(0,0,0,0.452);
}
Then you have to take light class and in that you have to position relative, top 25px left 45px width 15px height 15px border radius 50%, background rgb box shadow 0 0 10px rgb something like this.
.light{
position: relative;
top: 25px;
left: 45px;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgb(0, 255, 255);
box-shadow: 0 0 10px rgb(4, 236, 236);
}
After that you have to take loading class and write css in it like width 100%, height 100%, border 3px solid rgb border bottom 5px solid rgb border left 5px solid rgb border radius 50%, animation animate 2s ease in out infinite something like this Kind.
.loading{
width: 100%;
height: 100%;
border: 3px solid rgb(73,73,73);
border-bottom: 5px solid rgb(4, 236, 236);
border-left: 5px solid rgb(4, 236, 236);
border-radius: 50%;
animation: animate 2s ease-in-out infinite;
}
Most Popular Articles
How to make portfolio website using html, css and JavaScript?
How create footer for website using html, css?
How to design tea cup with bapour effects using html, css only?
How to make 3D flip book using css only?
How to design our team section using css only?
How to make neumorphism user profile using html, css?
Loading Animate
Now you have to give animation in loading. So that it can animate easily and then we can use it in our project also, then I know how to animate it. First of all you have given animate variable next to animation property. Using which we can animation our content. Then after that you have to set that variable next to your keyframes tag something like this. @keyframes animate Then inside it you have to give some property. Like 100% then put open curly braces in front of it then take transform property and rotate its value something like this transform rotate 360deg.
@keyframes animate{
100%{
transform: rotate(360deg);
}
}
Now you have to take the paragraph tag. And css has to be written in it so that the text looks good and the style of the font also looks good, so now we design the paragraph. So first you have to take p tag. And then you have to apply open curly braces then close curly braces. You have to give some property inside these braces. such as position absolute, top 48%, left 46%, font size 25px font weight 600, color rgb font family breath only.
p{
position: absolute;
top: 48%;
left: 46%;
font-size: 25px;
font-weight: 600;
color: rgb(4, 236, 236);
font-family: sans-serif;
}
You will find the rest of the information in our source code, so you can copy our source code and paste it in your style. So that you will not face any problem in using it.
CSS Source Code..
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(80,80,80);
}
.circle{
width: 300px;
height: 300px;
border-radius: 50%;
background: #212121;
box-shadow: 0 0 40px rgba(0,0,0,0.452);
}
.light{
position: relative;
top: 25px;
left: 45px;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgb(0, 255, 255);
box-shadow: 0 0 10px rgb(4, 236, 236);
}
.loading{
width: 100%;
height: 100%;
border: 3px solid rgb(73,73,73);
border-bottom: 5px solid rgb(4, 236, 236);
border-left: 5px solid rgb(4, 236, 236);
border-radius: 50%;
animation: animate 2s ease-in-out infinite;
}
@keyframes animate{
100%{
transform: rotate(360deg);
}
}
p{
position: absolute;
top: 48%;
left: 46%;
font-size: 25px;
font-weight: 600;
color: rgb(4, 236, 236);
font-family: sans-serif;
}
