Introduction
Here we are going to make an loading animation Css with the help of HTML and CSS. In this loader, there will be text written “loader,” . A ball will move continuously from “L”” to ” i ” and ” i ” to “L” until load complete. This is very useful, as you have already seen loaders on almost all the websites to let people wait until they do not get their source. So you can also add this loader to your websites.
Now let’s start making this loader with animation with the help of following the simple code of HTML and CSS one by one to get proper knowledge about this project.
HTML
First, we will create the structure of the loader with the help of HTML. In this, we will first create the parent div, in which all the content of the loader will be, and then move toward the loader. In loader, we will make a div to make the ball. That will continuously move and a paragraph tag in which all the alphabets of loader will be written separately in a span tag with the same class in a paragraph tag.
<!DOCTYPE html>
<html lang="en" >
<!-- Code by layakcoder -->
<head>
<meta charset="UTF-8">
<title>Loading Animation Using HTML CSS</title>
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="divider" aria-hidden="true"></div>
<p class="loading-text" aria-label="Loading">
<span class="letter" aria-hidden="true">L</span>
<span class="letter" aria-hidden="true">o</span>
<span class="letter" aria-hidden="true">a</span>
<span class="letter" aria-hidden="true">d</span>
<span class="letter" aria-hidden="true">i</span>
<span class="letter" aria-hidden="true">n</span>
<span class="letter" aria-hidden="true">g</span>
</p>
</div>
</body>
</html>CSS
After making the structure of animated loader now we will add styling through the CSS( an external stylesheet used to give styling to the html page and to make responsive attached to the html file). In this, we will first take the parent div to the center of the screen and then move toward the loader.
In loader, we will make the span tags in one row by giving the flex property to the parent divs. Then we will give styling to the text written in the span tag. Like color, font size, font family, and gapping between the texts. We will use the before property to move the ball on the loader text.
* {
box-sizing: border-box;
}
body {
font-family: 'Cherry Bomb One', cursive;
font-size: 1rem;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 90vh;
background: #000000;
overflow: hidden;
}
#container {
position: relative;
transform: scale(0.725);
}
.divider {
position: absolute;
z-index: 2;
top: 65px;
left: 200px;
width: 50px;
height: 15px;
background: #000000;
}
.loading-text {
position: relative;
font-size: 57px;
margin: 0;
white-space: nowrap;
}
.loading-text::before {
position: absolute;
content: "";
z-index: 1;
top: 32px;
left: 113px;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
-webkit-animation: dotMove 1800ms cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
animation: dotMove 1800ms cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
}
.loading-text .letter {
display: inline-block;
position: relative;
color: #fffefe;
letter-spacing: 8px;
}
.loading-text .letter:nth-child(1) {
transform-origin: 100% 70%;
transform: scale(1, 1.275);
}
.loading-text .letter:nth-child(1)::before {
position: absolute;
content: "";
top: 16px;
left: 0px;
width: 35px;
height: 36px;
background: #020202;
border-radius: 0px;
transform-origin: 100% 0;
-webkit-animation: lineStretch 1800ms cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
animation: lineStretch 1800ms cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
}
.loading-text .letter:nth-child(5) {
transform-origin: 100% 70%;
-webkit-animation: letterStretch 1800ms cubic-bezier(0.25, 0.23, 0.73, 0.75) infinite;
animation: letterStretch 1800ms cubic-bezier(0.25, 0.23, 0.73, 0.75) infinite;
}
.loading-text .letter:nth-child(5)::before {
position: absolute;
content: "";
top: 22px;
left: 0px;
width: 21px;
height: 18px;
background: #020202;
}
@-webkit-keyframes dotMove {
0%, 100% {
transform: rotate(180deg) translate(-110px, -10px) rotate(-180deg);
}
50% {
transform: rotate(0deg) translate(-111px, 10px) rotate(0deg);
}
}
@keyframes dotMove {
0%, 100% {
transform: rotate(180deg) translate(-110px, -10px) rotate(-180deg);
}
50% {
transform: rotate(0deg) translate(-111px, 10px) rotate(0deg);
}
}
@-webkit-keyframes letterStretch {
0%, 100% {
transform: scale(1, 0.35);
transform-origin: 100% 75%;
}
8%, 28% {
transform: scale(1, 2.125);
transform-origin: 100% 67%;
}
37% {
transform: scale(1, 0.875);
transform-origin: 100% 75%;
}
46% {
transform: scale(1, 1.03);
transform-origin: 100% 75%;
}
50%, 97% {
transform: scale(1);
transform-origin: 100% 75%;
}
}
@keyframes letterStretch {
0%, 100% {
transform: scale(1, 0.35);
transform-origin: 100% 75%;
}
8%, 28% {
transform: scale(1, 2.125);
transform-origin: 100% 67%;
}
37% {
transform: scale(1, 0.875);
transform-origin: 100% 75%;
}
46% {
transform: scale(1, 1.03);
transform-origin: 100% 75%;
}
50%, 97% {
transform: scale(1);
transform-origin: 100% 75%;
}
}
@-webkit-keyframes lineStretch {
0%, 45%, 70%, 100% {
transform: scaleY(0.125);
}
49% {
transform: scaleY(0.75);
}
50% {
transform: scaleY(0.875);
}
53% {
transform: scaleY(0.5);
}
60% {
transform: scaleY(0);
}
68% {
transform: scaleY(0.18);
}
}
@keyframes lineStretch {
0%, 45%, 70%, 100% {
transform: scaleY(0.125);
}
49% {
transform: scaleY(0.75);
}
50% {
transform: scaleY(0.875);
}
53% {
transform: scaleY(0.5);
}
60% {
transform: scaleY(0);
}
68% {
transform: scaleY(0.18);
}
}
@media (min-width: 48rem) {
#container {
transform: scale(0.725rem);
}
}
@media (min-width: 62rem) {
#container {
transform: scale(0.85);
}
}Animation
In the animation part, we will apply animation. The ball move with the help of @keyframe ( a framework of CSS is used to apply animation to the html elements). In animation we will write animations for the movements of ball. By giving the transform property to change the direction of ball in x-axis as well as y-axis with some interval of time. Then we will make the text stretchable when ball will hit the text. Then scale of a particular direction will change and animation will occur until the user active on page.
Finally, we made the loading animation css by following the simple code of HTML and CSS. You can also make such projects to enhance your experience, or you can make this loader to add to your website. If you want the source code, then click on the link given below to download the code.
For more explanation, click on the link given below to watch the video.
You can also check
