Create a Music Loading Animation in HTML & CSS
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.
Steps To Create a Music Loading Animation
To build Music Loading Animation using HTML CSS & , follow the given steps line by line:
1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
2. Create an index.html file. The file name must be index and its extension .html
3. Create a style.css file. The file name must be style and its extension .css
4. Create a script.js file. The file name must be script and its extension .js
First, paste the following codes into your index.html file.
<!-- Coding By CodingNepal - codingnepalweb.com -->
<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>
<link rel="stylesheet" href="style.css">
<!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
Second, paste the following codes into your style.css file
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
font-family: 'Poppins', sans-serif;
transform: rotate(180deg);
/* background-color: #fff; */
animation: loader 2s infinite;
.animation span:nth-child(1){
.animation span:nth-child(2){
.animation span:nth-child(3){
.animation span:nth-child(4){
.animation span:nth-child(5){
/* 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!