Let’s create a Ball Leaping Loader using just HTML and CSS. This project is perfect for beginners and will teach you some cool animation techniques.
We’ll keep it simple and stylish, using HTML for the structure and CSS for the animation. No need for complicated coding – just some basic HTML and CSS skills!
Let’s dive into building this Ball Leaping Loader. Whether you’re new to coding or looking to expand your skills, this project is a fun way to learn animation. Let’s get started and make your webpage more dynamic!
HTML :
This HTML code sets up the structure of a webpage. It includes a title, a link to an external stylesheet (style.css), and a JavaScript file (script.js). Inside the body, there is a div element with the class “loader” containing nine div elements with the class “dot”. These dots represent the animated loading animation defined in the CSS file.
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Ball Leaping Loader</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <div class="loader"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <!-- partial --> <script src="./script.js"></script> </body> </html>
CSS :
This code is for creating a loading animation with bouncing dots. It imports a font from Google Fonts, sets up the layout of the webpage, and defines the styles for the loading animation. The animation is created using CSS keyframes to make the dots bounce up and down in a loop. Each dot has a different color and delay to create a visually appealing effect.
@import url(https://fonts.googleapis.com/css?family=Montserrat);
body {
height: 100vh;
padding: 2rem;
display: grid;
place-items: center;
text-align: center;
background-color: #f3f8ff;
}
.loader {
display: flex;
align-items: center;
justify-content: space-around;
width: 100px;
height: 50px;
margin: 0 auto;
}
.dot {
position: relative;
display: inline-block;
padding: 25px;
height: 157px;
width: 50px;
}
.dot:before {
position: absolute;
content: "";
display: block;
top: 0;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ae17fb;
transform-origin: 50%;
animation: bounce 0.5s alternate infinite ease;
/* you can try experimenting with the duration and animation-iteration-count here */
}
.dot:nth-child(1):before {
background-color: #e26ee5;
animation-delay: 0s;
}
.dot:nth-child(2):before {
background-color: #7e30e1;
animation-delay: -0.8s;
}
.dot:nth-child(3):before {
background-color: #49108b;
animation-delay: -1.6s;
}
.dot:nth-child(4):before {
background-color: #e26ee5;
animation-delay: -2.4s;
}
.dot:nth-child(5):before {
background-color: #7e30e1;
animation-delay: -3.2s;
}
.dot:nth-child(6):before {
background-color: #49108b;
animation-delay: -4s;
}
.dot:nth-child(7):before {
background-color: #e26ee5;
animation-delay: -4.8s;
}
.dot:nth-child(8):before {
background-color: #7e30e1;
animation-delay: -5.6s;
}
.dot:nth-child(9):before {
background-color: #49108b;
animation-delay: -6.4s;
}
@keyframes bounce {
0% {
top: 150px;
height: 5px;
border-radius: 60px 60px 20px 20px;
transform: scaleX(2);
}
35% {
height: 50px;
border-radius: 50%;
transform: scaleX(1);
}
100% {
top: 0;
}
}
Creating a Ball Leaping Loader with HTML and CSS is a great way to learn animation. It’s simple, enjoyable, and perfect for beginners. Let’s embrace creativity and have fun coding!
Facing any problems in your project ? Stay confident! Click Download, obtain the source code, and tackle your coding issues with determination. May your coding experience be smooth and rewarding!
