As users, we’re all too familiar with the dreaded loading screen. Whether it’s waiting for a website to load or a mobile app to start up, it can be frustrating to stare at a static or spinning progress bar. However, there is a way to make this experience more enjoyable for your users – by incorporating a musical loading animation.
A musical loading animation is a creative way to add a fun and interactive element to your user interface. It can be as simple as a progress bar that changes color or shape in time with the music, or as complex as a full-fledged animation that tells a story while the user waits.
This blog will teach you how to create a Music Loading Animation in HTML & CSS. The blog will cover everything from the basics of creating a Music Loading Animation in HTML, to styling it with CSS. Recently I have provided a blog on Login & Registration Form in HTML & CSS. I hope you find this blog helpful as well.
If you’re curious about how the Music Loading Animation works, look at the preview I have provided below. I have explained the HTML and CSS code I used to make this Musical Loading Animation.
Video Tutorial Of Music Loading Animation
Steps To Create a Music Loading Animation
- File Structure of the Project
- Creating Login & Registration From
1. File Structure of the project
2. Creating Music Loading Animation
In the second step, we will design the user interface for our Music Loading Animation and style it using HTML and CSS. Once the user interface is complete, we will use animation to animate this Music Loading Animation.
In the index.html file, add the following HTML code to create the basic structure of the animated Music Loader.
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Music Loading Animation</title>
<!---Custom CSS File--->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="animation">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
Copy Codes
In the style.css file, add the following CSS code to add styles and add the animation so that it looks like all the boxes are loading one after the other If you want, you can change the color, background and size of the button in this code.
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
}
.animation{
height: 95px;
display: flex;
transform: rotate(180deg);
}
.animation span{
width: 38px;
margin: 0 2px;
border-radius: 6px;
/* background-color: #fff; */
animation: loader 2s infinite;
}
@keyframes loader{
0%, 100%{
height: 15px;
background: #0081C9;
}
25%{
height: 95px;
background: #FFB100;
}
50%{
height: 50px;
background: #54B435;
}
75%{
height: 95px;
background: #FF6464;
}
}
.animation span:nth-child(1){
animation-delay: .2s;
}
.animation span:nth-child(2){
animation-delay: .4s;
}
.animation span:nth-child(3){
animation-delay: .6s;
}
.animation span:nth-child(4){
animation-delay: .8s;
}
.animation span:nth-child(5){
animation-delay: 1s;
}
Conclusions and Final Words
By following the steps you have successfully created a Music Loading Animation. There are lots of CSS animations you can find on this website to enhance your skills in HTML & CSS.
If you found this blog helpful, please consider sharing it with others. Your support helps us continue creating valuable content and resources for the development community. Thank you for your support!
