Create a Music Loading Animation in HTML & CSS

0

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.

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

We will create this Login & Registration Form in two steps:
  • File Structure of the Project
  • Creating Login & Registration From

1. File Structure of the project

To build this Music Loading Animation, we’ll be using two separate files – index.html and style.css. These files will contain the HTML & CSS code respectively needed to bring the Music Loading Animation. Let’s get started by setting up these files and adding the basic code.
 
Once you have made these files, you can proceed to the next step of creating your Music Loading Animation.

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!

 

Previous articleLogin & Registration Form in HTML CSS & JavaScript
Next articleResponsive Card Slider in HTML & CSS

LEAVE A REPLY

Please enter your comment!
Please enter your name here