Create a Music Loading Animation in HTML & CSS

CodingNepal — Fri, 20 Jan 2023 21:11:21 +0000

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.





  
  
  
  Music Loading Animation
  
  


  
    
    
    
    
    
  


 
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!

Animated Loader in HTML & CSS

CodingNepal — Sun, 14 Nov 2021 21:11:19 +0000

Hello friends, as you know I have been creating a lot of JavaScript Projects, that’s why today I will create a Loader using HTML and CSS. I am sure you will love this loading animation.

Let’s have look at the given image of our program [Create a Loader in HTML & CSS], there are a total of 15 dots and they rotate at 360 deg with brighter and dimmer colors.

I have added smooth and beautiful animation. I highly recommend you to watch the real demo of this website loading animation or preloader. You will also get the idea, how all HTML and CSS codes work perfectly in this loading animation.

Animated Loader in HTML & CSS | Video Tutorial

You will get all the HTML and CSS code that I have used to create this loader or Preloader, before jumping into the source code, you need some important points to build this loading animation.

As you have seen on the video tutorial of creating loader or preloader for the website. All dots are blinking with different time intervals, which looks like they all are rotating at 360 deg. Also, you have seen, how I have created this beautiful loading animation using HTML and CSS.

I hope now you can create this type of loading animation easily, if you are feeling difficulty, don’t worry I have provided all the HTML & CSS source code below.

Loader or Pre-loader [Source Code]

To get the following HTML and CSS code for an Animated loader or preloader. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.




  
    
      Website Loading Animation | CodingLab

*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
section{
  display: flex;
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: #4070f4;
}
section .dots span{
  position: absolute;
  height: 10px;
  width: 10px;
  background: #fff;
  border-radius: 50%;
  transform: rotate(calc(var(--i) * (360deg / 15))) translateY(35px);
  animation: animate 1.5s linear infinite;
  animation-delay: calc(var(--i) * 0.1s);
  opacity: 0;
}
@keyframes animate {
 0%{
   opacity: 1;
 }
 100%{
   opacity: 0;
 }
}

Animated Loader in HTML & CSS – CodingNepal