Introduction Flipping Loader Animation CSS
Today we are presenting to you our new project, which is a Flipping Loader animation CSS with the help of HTML and CSS. There are two languages that have been used. HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheet). In this project, there will be a text written “Loading…” and that text will be continuously animated, like each text will flip and come back to its original position. The next text will flip after the previous, and that will continue and apply to all the texts. This is a very useful project, as you can use it on your website for loading. You might have seen too many loaders on many websites, which is very important while loading something. We have to wait so this loader can be used.
Now let’s start making this project by following the simple and easy code of HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheet). We will do it step-by-step so that you can understand it carefully. The medium of code difficulty will be average, so a fresher can also understand it without any problem. We have used here the basic concept of coding, which is not very complicated. If you have any problems, you can contact us through the link given below.
HTML (Hypertext Markup Language)
First, we will make the structure of this project with the help of HTML (Hyper Text Markup Language). This is a markup language that is used to make web pages by writing the code in a text editor. In this project, first we will give the title of the project in the “title tag”. Then we will move toward the main content. In which we will make a parent div that will contain all the letters in a div and a child div in which the letters will be written in two divs, one for the original letter and another that will be the same but that will appear after the flipping of the first letter. This animation will continue to run until the user is active on the page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flipping Loader </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="loading">
<div class="letter">
<div>L</div>
<div class="back">L</div>
</div>
<div class="letter">
<div>o</div>
<div class="back">o</div>
</div>
<div class="letter">
<div>a</div>
<div class="back">a</div>
</div>
<div class="letter">
<div>d</div>
<div class="back">d</div>
</div>
<div class="letter">
<div>i</div>
<div class="back">i</div>
</div>
<div class="letter">
<div>n</div>
<div class="back">n</div>
</div>
<div class="letter">
<div>g</div>
<div class="back">g</div>
</div>
<div class="letter dot">
<div>.</div>
<div class="back">.</div>
</div>
<div class="letter dot">
<div>.</div>
<div class="back">.</div>
</div>
<div class="letter dot">
<div>.</div>
<div class="back">.</div>
</div>
</div>
</body>
</html>CSS (Cascading Style Sheet)
After making the structure of that page, it’s time to apply some styling and animation with the help of CSS (Cascading Style Sheet). Which is used to give styling to the HTML page elements that are attached to the HTML’s link tag. In this, we will first make the background black using the background-color property. Take the whole text to the center of the screen. Now we will take all the text’s parent divs in one row by applying display flex properties to the parent div. Then we will give styling to the texts. In text, we will adjust the size and position of child divs. Give the color, size, and font family to the text.
html, body {
padding: 0;
height: 100%;
display: table;
margin: 0 auto;
font-size: 52px;
font-family: Monaco, Consolas, "Lucida Console", monospace;
background-color: #020202;
background-image: url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/kindajean.png");
}
.loading {
text-align: center;
display: table-cell;
vertical-align: middle;
text-shadow: grey 1px 1px 1px;
}
.letter {
float: left;
width: 35px;
height: 60px;
position: relative;
-webkit-animation: flip 2s infinite;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
}
.letter div {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform: translate(0);
-webkit-backface-visibility: hidden;
-webkit-animation: color 8s infinite;
}
.letter div.back { -webkit-transform: rotateY(180deg); }
.letter:nth-child(1), .letter:nth-child(1) div { -webkit-animation-delay: 0.125s; }
.letter:nth-child(2), .letter:nth-child(2) div { -webkit-animation-delay: 0.25s; }
.letter:nth-child(3), .letter:nth-child(3) div { -webkit-animation-delay: 0.375s; }
.letter:nth-child(4), .letter:nth-child(4) div { -webkit-animation-delay: 0.5s; }
.letter:nth-child(5), .letter:nth-child(5) div { -webkit-animation-delay: 0.625s; }
.letter:nth-child(6), .letter:nth-child(6) div { -webkit-animation-delay: 0.75s; }
.letter:nth-child(7), .letter:nth-child(7) div { -webkit-animation-delay: 0.875s; }
.letter:nth-child(8), .letter:nth-child(8) div { -webkit-animation-delay: 1s; }
.letter:nth-child(9), .letter:nth-child(9) div { -webkit-animation-delay: 1.125s; }
.letter:nth-child(10), .letter:nth-child(10) div { -webkit-animation-delay: 1.25s; }
@-webkit-keyframes flip {
0% { -webkit-transform: rotateY(0deg) translate(0); }
40%, 100% { -webkit-transform: rotateY(180deg) translate(0); }
}
@-webkit-keyframes color {
0% { color: #f70b0b; }
25% { color: #8f5ff6; }
50% { color: #e621bb; }
75% { color: #F3B034; }
100% { color: #5b42ea; }
}Animation
In this, we will apply animation to the text with the help of @keyframe (this is a CSS property used to give the animation to the HTML page). In this, we will give the name of the animation and make the animation by using the proper transform to flip the text and change the color of the text. This animation name will be used in the text parent divs. The iteration will be infinity so that the animation will continuously run.
Output of Flipping Loader Animation CSS
Now, finally, we have made this Flipping Loader animation CSS project using the simple and easy code of HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheet). Try to make such projects by just taking ideas from here that will improve your practice and knowledge. If you want the source code, then click on the button given below.
For more explanation, click on the link given below to watch the video.
You can also check:
