Creating a loading animation using HTML and CSS is a relatively simple process that can add a touch of professionalism and polish to any website. To begin, you will need a basic understanding of HTML and CSS. If you are not familiar with these languages, you may want to start with some tutorials or resources to get a better understanding of how they work. Once you have a solid foundation in HTML and CSS, you can start creating your loading animation.
The first step is to decide on the design and style of your animation. This will depend on the overall look and feel of your website, as well as the purpose of the animation. For example, you may want to use a simple spinning wheel for a loading animation, or a more complex animation that incorporates your brand’s colors and style.
Once you have chosen your design, you can begin building your HTML and CSS code. You will need to create a container element to hold the animation, and then add the necessary HTML and CSS to create the animation itself. This will typically involve creating some sort of looping animation using CSS keyframes, as well as any additional styling or design elements that you want to include.
Once your animation is complete, you can add it to your website by including the HTML and CSS code in the appropriate place in your website’s code. You may also want to consider adding some JavaScript code to control when the animation is displayed, such as only showing it when your website is loading or when certain actions are taken by the user.
Video Tutorial of How To Create Loading Animation Using HTML & CSS
Loading Animation Using Html, CSS and JavaScript | Free Source Code
To create this program (Loading Animation). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
Â
In the first place, make a HTML document with the name of index.html and paste the given codes in your HTML record. Keep in mind, you’ve to make a document with .html extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Animation Using HTML and CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loader">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<span>Loading...</span>
</div>
</body>
</html>
Second, make a CSS record with the name of style.css and paste the given codes in your CSS document. Keep in mind, you’ve to make a record with .css extension.
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
font-family: sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: rgb(57, 159, 255);
}
.loader{
height: 75px;
width: 125px;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
}
.loader span{
font-size: 22px;
text-transform: uppercase;
color: #fff;
margin: auto;
}
.loader .ball{
width: 25px;
height: 25px;
background: #fff;
border-radius: 50%;
animation: animate 0.5s alternate infinite;
}
.ball:nth-child(2){
animation-delay: 0.16s;
}
/* .ball:nth-child(3){
animation-delay: 0.32s;
} */
@keyframes animate{
0%{
transform: scaleX(1.25);
}
100%{
transform: translateY(-50px) scaleX(1);
}
}
Thats all, now youve successfully created a program Loading Animation Using Html, CSS and JavaScript. If your code doesnt work or youve faced any error/problem, please download the source code files from the given download button. Its free and a .zip file will be downloaded then youve to extract it.
Click on the following download button to download all source code files.
