css effects – CodingNepal

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!

Create Toggle Dark/Light Mode in HTML & CSS

CodingNepal — Tue, 13 Dec 2022 21:11:21 +0000

Previously, we usually had a light theme for our web and mobile platforms. But now, dark mode is gaining popularity. Many desktop and mobile app platforms are embracing the dark theme because it is more comfortable to look at and saves battery life on mobile devices.

This blog will teach you how to create Toggle Button in Dark/Light Mode HTML and CSS. In my recent blog post, I have provided Top 10 Website Templates Design, which could also enhance your skills in HTML CSS as well as JavaScript.

Although the light theme has some benefits, many people still need to learn to use dark-themed websites. Therefore, it would be advisable to provide users with the ability to switch between dark and light modes in web applications. This way, they can choose the theme that works best for them.

A toggle button is a user interface element that allows users to switch between two states, such as on and off. In the context of dark and light modes, a toggle button would be used to switch between the two color schemes. Toggle buttons can be found on many web pages and apps, such as the wifi toggle button on Windows.

In the provided image of the Dark/Light Toggle Button, the button is in the “off” or “closed” state because the blue circle is on the left side. Additionally, the background is blue, indicating that the current color scheme is the light mode. When the toggle button is clicked, the blue circle moves to the right side, and the color scheme changes to the dark mode, as indicated by the change in color of the background and the toggle button.

If you’re curious about how the Dark/Light Toggle Button works, take a look at the preview I have provided below. I have explained the HTML and CSS code I used to make this Toggle Button and its Dark/Light Mode.

Toggle Button Dark/Light Mode in HTML CSS | Video Tutorial

All of the HTML and CSS code that I used to create this Dark/Light Mode is provided. Instead of duplicating the code or downloading the source code file, I strongly advise you to watch the full video explanation of this Toggle Button Dark/Light Mode. By watching the video tutorial, you can create this Toggle Button.

As you saw in the video tutorial for this Toggle Button with Dark/Light Mode, the initial toggle button was white with a lime green background and the webpage was white. When I clicked the toggle button, the circle moved to the right and changed to dark, and the background of the body also changed to dark with a nice animation.

Now, hopefully, you can create this Toggle Button Dark/Light Mode using HTML and CSS. The source codes for all the HTML and CSS I used to develop this Input Label Animation are provided below.

Toggle Button Dark/Light Mode in HTML & CSS [Source Code]

To create Toggle Dark/Light Mode, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Toggle Button Dark/Light by clicking on the given download button.

First, paste the following codes into your index.html file.





  
  
  
   Toggle Button With Dark/Light Mode | CoderGirl

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');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
label{
  position: relative;
  width: 480px;
  height: 180px;
  display: block;
  background: #d9d9d9;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: inset 0px 5px 15px rgba(0,0,0,0.3), inset 0px -5px 15px rgba(255,255,255,0.3);
}
label:after{
  content: '';
  position: absolute;
  height: 160px;
  width: 160px;
  background: #f2f2f2;
  border-radius: 100px;
  top: 10px;
  left: 10px;
  transition: 0.5s;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
input:checked ~ label:after{
  left: 470px;
  transform: translateX(-100%);
  background: linear-gradient(180deg,#777,#3a3a3a);
}
input:checked ~ label{
  background: #242424;
}
.background{
  position: absolute;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: -1;
  transition: 0.5s;
}
input:checked + label + .background{
  background: #242424;
}
input{
  display: none;
}

That’s all, now you’ve successfully created a project on Toggle Button Dark/Light Mode. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

Navigation Menu Hover Animation in HTML and CSS

CodingNepal — Sat, 24 Jul 2021 21:11:18 +0000

Hello friends, I hope you all doing well, today we will create all-important and mostly used hover animations for any type of navigation. As you already know that I have created various types of Responsive Navigation Bar and this type of tiny animation and effect makes our design far better right?

The animation that appears while hovering in the navigation links is known as navigation hover animation. Basically, these types of animation feel us that we have clicked or hovered on them.

As you can see on the given image of our program [all navigation menu hover animation], I know you are seeing only one underline under the navigation links and off course if is active for or hovered form. Basically, there are different types of menu animation on hover.

Let’s watch all the hover animation that I have built in this program[Navigation Menu Hover Animation], and one thing after watching the following video tutorial you will not see the demo of these hover animations, you will also know all code that I have used to create this hover animation and effect.

Navigation Menu Hover Animation in HTML and CSS

I have provided all source code of this all navigation menu hover animations and effects below, but before jumping on the source code files, I would like to cover some important points that you should know.

As you have seen on the video tutorial of all navigation menu bar hover animation and effect using HTML and CSS. At first, we have seen only navigation links, and when I did hover on those every navigation link’s beautiful and different underline animations appear with smooth animation.

In those first, second, and third navigation links I have given position absolute and that underline width increases while we hover on them. On the last navigation link, I have given width 100% and scaleX 0 and transform-origin right, and while we do hover I have given transform scaleX 1 and transform-origin right that’s why it moves forward.

I believe you have got all the ideas and tactics that I have used on this program [Navigation Menu Hover Animation in HTML and CSS] and you can build this type of animation easily but hose friends who are feeling difficult to make this, you can get all the source code of this hover animations from below.

Navigation Menu Hover Animation [Source Code]

Before copying the given code of Navigation Menu Hover Animation and Effects you need to create two files: an HTML file and a CSS file. After Creating these two files then you can copy-paste the following codes in your documents.




  
    
    All Navigation Menu Hover Animation | CodingLab  
    
   

  
    Dashboard
    Portfolio
    Services
    Feedback

/* Google Fonts Import Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c1f7f5;
}
.nav-links{
  display: flex;
  align-items: center;
  background: #fff;
  padding: 20px 15px;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.nav-links li{
  list-style: none;
  margin: 0 12px;
}
.nav-links li a{
  position: relative;
  color: #333;
  font-size: 20px;
  font-weight: 500;
  padding: 6px 0;
  text-decoration: none;
}
.nav-links li a:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: #34efdf;
  border-radius: 12px;
  transition: all 0.4s ease;
}
.nav-links li a:hover:before{
  width: 100%;
}
.nav-links li.center a:before{
  left: 50%;
  transform: translateX(-50%);
}
.nav-links li.upward a:before{
  width: 100%;
  bottom: -5px;
  opacity: 0;
}
.nav-links li.upward a:hover:before{
  bottom: 0px;
  opacity: 1;
}
.nav-links li.forward a:before{
  width: 100%;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
}
.nav-links li.forward a:hover:before{
  transform: scaleX(1);
  transform-origin: left;
}

If you face any difficulties while creating your Navigation Menu Hover Animation or your code is not working as expected, you can download the source code files for this Navbar Menu Hover Animation for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

css effects – CodingNepal

Create a Music Loading Animation in HTML & CSS

Video Tutorial Of Music Loading Animation

Steps To Create a Music Loading Animation

2. Creating Music Loading Animation

Conclusions and Final Words

Create Toggle Dark/Light Mode in HTML & CSS

Toggle Button Dark/Light Mode in HTML CSS | Video Tutorial

You May Like This:

Toggle Button Dark/Light Mode in HTML & CSS [Source Code]

Navigation Menu Hover Animation in HTML and CSS

Navigation Menu Hover Animation in HTML and CSS

You Might Like This:

Navigation Menu Hover Animation [Source Code]