css button animation – CodingNepal

Multi Step Progress Bar in HTML CSS & JavaScript

CodingNepal — Sun, 05 Feb 2023 21:11:22 +0000

The multi-step process enhances the user experience by dividing the registration process into smaller, more manageable steps. This reduces confusion and frustration for the user, as clear and concise guidance is provided throughout the process.

In this blog, you will learn how to create a Multi-Step Progress Bar using HTML CSS & JavaScript. As you can see in the image there will be a total of four steps and two buttons to control that multistep progress bar. Additionally, recently I thought to create Neumorphism Loading Animation, you may like that as well.

By the end of this blog post, you will have a Multi-Step Progress Bar. And, you can implement it in various sections like Registration or signup form.

Video Tutorial of Multi-Step Progress Bar

If you would like to create this multistep progress bar step by step, the video tutorial is provided below. Otherwise, you may continue reading.

Steps to create Multi Step Progress Bar in HTML CSS & JS

We will create this multistep progress bar in HTML CSS and JavaScript.

1. File Structure

In the initial step, we will create a new directory for our project. You can name it whatever you want, and inside this directory, create two files: index.html and style.css. These files will contain the necessary HTML and CSS code for the card slider.

2. Creating the Multi-Step Progress Bar

In the second step, we will create the layout and style the progress bar & buttons using HTML and CSS. In your index.html file, add the following HTML code to create the basic structure of the multi-step progress bar.




  
    
    
    
    Multi Step Progress
    
    
  
  
    
      
        1
        2
        3
        4

In your style.css file, add the following CSS code to style the multi-step progress bar. If you want, you can change the font, size, color, and background of the progress bar & buttons by slightly modifying 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 {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f7fb;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 400px;
  width: 100%;
}
.container .steps {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.steps .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  color: #999;
  font-size: 22px;
  font-weight: 500;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #e0e0e0;
  transition: all 200ms ease;
  transition-delay: 0s;
}
.steps .circle.active {
  transition-delay: 100ms;
  border-color: #4070f4;
  color: #4070f4;
}
.steps .progress-bar {
  position: absolute;
  height: 4px;
  width: 100%;
  background: #e0e0e0;
  z-index: -1;
}
.progress-bar .indicator {
  position: absolute;
  height: 100%;
  width: 0%;
  background: #4070f4;
  transition: all 300ms ease;
}
.container .buttons {
  display: flex;
  gap: 20px;
}
.buttons button {
  padding: 8px 25px;
  background: #4070f4;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  transition: all 200ms linear;
}
.buttons button:active {
  transform: scale(0.97);
}
.buttons button:disabled {
  background: #87a5f8;
  cursor: not-allowed;
}

Finally, add the following JavaScript code to your script.js file to add functionality for creating a multi-step progress bar.

 //DOM Elements
const circles = document.querySelectorAll(".circle"),
  progressBar = document.querySelector(".indicator"),
  buttons = document.querySelectorAll("button");

let currentStep = 1;

// function that updates the current step and updates the DOM
const updateSteps = (e) => {
  // update current step based on the button clicked
  currentStep = e.target.id === "next" ? ++currentStep : --currentStep;

  // loop through all circles and add/remove "active" class based on their index and current step
  circles.forEach((circle, index) => {
    circle.classList[`${index < currentStep ? "add" : "remove"}`]("active");
  });

  // update progress bar width based on current step
  progressBar.style.width = `${((currentStep - 1) / (circles.length - 1)) * 100}%`;

  // check if current step is last step or first step and disable corresponding buttons
  if (currentStep === circles.length) {
    buttons[1].disabled = true;
  } else if (currentStep === 1) {
    buttons[0].disabled = true;
  } else {
    buttons.forEach((button) => (button.disabled = false));
  }
};

// add click event listeners to all buttons
buttons.forEach((button) => {
  button.addEventListener("click", updateSteps);
});

Conclusion and Final Words

By following the steps in this blog post, you have successfully created a Multi-Step Progress Bar using HTML, CSS, and JavaScript. Now it’s up to you to experiment with the code and make it more useful.

If you encounter any problems or your code is not working as expected, you can download the source code files of this Multi Step Progress Bar project by clicking on the given download button. It’s free, and a zip file will be downloaded that contains the project folder with source code files.

Top 10 Best CSS Animation & Transition

CodingNepal — Fri, 25 Nov 2022 21:11:21 +0000

CSS (Cascading Style Sheets) has evolved into the most powerful markup language for creating website and application user interfaces and experiences. CSS enables us to create a variety of animations and transitions, along with styling the overlook of the webpage.

I’ve included over 10 CSS Animations and Transitions in this blog to help you overcome your HTML and CSS skills to the next level. I recently provided upwards of 16 Login & Registration Forms. I believe that you’ll find this blog useful as well.

CSS Animation and transition are HTML element transformations that happen when the webpage loads or when the user interacts with it by hovering or clicking. Some animation and transitions could take place for a short period of time, while others may happen over a lengthy time period.

Let’s get into our list of CSS Animation and Transition.

1. 3D Layer CSS Hover Animation on Social Media Buttons

Originally, those social media icons will be in a natural shape; however, while you hover over those social media buttons, the icons begin to animate into a 3D shape with a gradient color, as shown in the image.

This animation and transition has been made with HTML and CSS. You should definitely try to make this to understand better how CSS transformation works as well as what we can create with CSS transformation. The video tutorial and source code link are given below for this 3d CSS hover animation on the button

2. CSS Hover Animation Multiple Color Dots

Initially, there will be many dots that glow in multiple colors; when you move the cursor or move your cursor over them, they will expand in a smooth and beautiful animation. I used HTML and CSS to create this hover animation. I have used the CSS hue property to display multiple colors.

Here you will gain knowledge of how to use CSS animation, transition, and keyframes, as well as the hue property, in this animation and transition. The source code with the demo link for this Multiple Color Dots CSS animation is given below.

Demo and Source code

3. CSS Hover Animation Image Transition

When you hover over a small profile image circle, the relevant image card appears in front of you with a z-index transition. Similarly, when you extract the mouse pointer from it, the image card returns to its original position. I used HTML and CSS to create this Animation.

You will learn how to create animation with the CSS z-index property. You should try to create this animation to enhance your HTML and CSS skills. You can get the video tutorial and source code for this CSS hover animation on the image by visiting the provided link.

4. CSS Animation Heart Spinner

This is the heart-shaped spinner, which has been created using HTML and CSS. Basically, there will be a circle in that cyan color at first, and it will rotate into a heart shape before returning to the original; this action will continue indefinitely. I’ve also included an image, which you can see in the image.

To improve your HTML and CSS skills, try making this CSS animation with a heart spinner and a shadow. This animated heart shape spinner’s video tutorial and source code links are provided below.

5. CSS Animation Text Glitch Effect

The text glitch animation is shown here. The animation continues until the text appears to be glitched and then returns to its normal shape. I used HTML and CSS to create this animation.

It is a simple CSS animation with transition; if you are fresh to HTML CSS and want to create micro animation, you should try this text glitch animation. You can access the video tutorial and source code link for the text glitch animation below.

6. CSS Hover Animation on Button

When you hover over that gradient button, the colorful border button initiates to animate with a delightful gradient color. When you move your cursor away from that button, the animation stops.

Here, you will learn how to make a gradient button with hover animation in this CSS Hover Animation guide. Even if you are a complete beginner in HTML and CSS, you can make this CSS Hover Animation. Please see the links below for the source and video tutorial link for this button animation.

7. CSS Hover Animation Navigation Menu

Here you will find all four of the popular Navigation Hover Animations made from HTML and CSS. When you hover over the first link, the underline appears from the left and goes back when you let go of the mouse; similarly, the second underline appears from the middle, the third from the bottom, and the last from the left and proceeds to the end.

If you want to learn how to make navbar hover animations, you should definitely try making these navigation links hover animations and their transition. Please see the links below for the source code and video tutorial of this Navigation Link Hover Animation.

8. CSS Animation Skeleton Loading

Popular platforms such as Facebook and YouTube now make extensive use of Skeleton Loading animation. We see skeleton animation while the page is loading. This skeleton animation was created using HTML and CSS.

This is a beginner-friendly CSS Animation; you should try making this Modern Skeleton Loading Animation to improve your HTML and CSS skills. This Skeleton Loader’s source code and video tutorial link are provided below.

8. Simple CSS Animation Loading Spinner

This is a simple and useful Loading Spinner made in HTML and CSS. It keeps rotating, and the colors fade from the front ball to the end, making loading even more amazing.

If you are a newcomer and want to create a Loading Spinner with HTML and CSS, this CSS Animation could help you enhance your HTML and CSS skills. The links to the video tutorial and the source code for this Loading Spinner are provided below.

9. CSS Animation Glowing Gradient Media Icons

This is the CSS hover animation on buttons with different colors which is created in HTML and CSS. As you can see when I take the cursor on the social media icons it starts glowing with a beautiful color.

I hope you will try to make or get an idea for this CSS hover Animation. Below is a video tutorial as well as a link to the source code.

10. CSS Animation Skills Bar

When the page loads, all of the Skill Bar’s lines begin animating from right to left and stop according to their value. This Skills Bar and Animation and transition were created using HTML and CSS.

If you have a basic understanding of HTML and CSS, you should try making this CSS Animation of the Skills Bar. I’ve included all of the source code for this Animated Skills Bar as well as a video tutorial link below.

Conclusion

These are the top ten CSS Animation and Transitions that I’ve created in HTML and CSS. I hope you like them. Comment down the CSS Animation Transition that you liked most and if you want more let me know in the comment section.

If you want to boost your HTML and CSS as well as JavaScript skills then you can visit my YouTube Channel.

There I have uploaded lots of projects which could be beneficial for you.If you found this blog helpful, don’t forget to share it with others.