How To Create Awesome Loading Animation Effect Using Only HTML & CSS
Project Introduction: In this project, we are going to implement a car running on a track using HTML and CSS with sound effects.
File structure:
- . index.html
- . style.css
HTML code: In the following code , first time open an index.html file then create html Structure. than Inside the body tag must take a <div></div> than take a class this class name anything select than create a anther <div></div> and a class name than fore <span></span> tag and save this html file .
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<!--font awesome filup-->
<link rel="stylesheet" href="css/all.css">
<title>loading animation effect </title>
<body>
<div class="loadig-screen">
<div class="loadig">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
style.css: The following is the code for file “style.css” which is used in the above HTML code.
*{
margin: 0;
padding: 0;
}
.loadig-screen{
width: 100%;
height: 100vh;
background: #0e1528;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
}
.loadig{
width: 80px;
display: flex;
flex-wrap: wrap;
animation: rotate 3s linear infinite;
}
@keyframes rotate {
to{
transform:rotate(360deg);
}
}
.loadig span{
width: 32px;
height: 32px;
background: red;
margin: 4px;
animation: scale 1.5s linear infinite;
}
@keyframes scale {
50%{
transform: scale(1.2);
}
}
.loadig span:nth-child(1){
border-radius: 50% 50% 0 50%;
background-color: white;
transform-origin: bottom right;
}
.loadig span:nth-child(2){
border-radius: 50% 50% 50% 0;
background-color: green;
transform-origin: bottom left;
animation-delay: .5s;
}
.loadig span:nth-child(3){
border-radius: 50% 0 50% 50%;
background-color: blue;
transform-origin: top right;
animation-delay: 1.5s;
}
.loadig span:nth-child(4){
border-radius: 0 50% 50% 50%;
background-color: #ff033e;
transform-origin: top left;
animation-delay: 1s;
}
Output :
My facebook page link:
1 Comments
Nice
ReplyDelete