Progress Bar – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Sun, 14 May 2023 05:58:37 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Multi Step Progress Bar in HTML CSS & JavaScript https://www.codingnepalweb.com/multi-step-progress-bar-html-css-javascript/ https://www.codingnepalweb.com/multi-step-progress-bar-html-css-javascript/#respond Sun, 05 Feb 2023 21:11:22 +0000 https://www.codingnepalweb.com/?p=4119 Multi Step Progress Bar in HTML CSS & JavaScript

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.

<!DOCTYPE html>
<!-- Coding By CodingNepal | codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Multi Step Progress</title>
    <link rel="stylesheet" href="style.css" />
    <!--<script src="script.js" defer></script>-->
  </head>
  <body>
    <div class="container">
      <div class="steps">
        <span class="circle active">1</span>
        <span class="circle">2</span>
        <span class="circle">3</span>
        <span class="circle">4</span>
        <div class="progress-bar">
          <span class="indicator"></span>
        </div>
      </div>
      <div class="buttons">
        <button id="prev" disabled>Prev</button>
        <button id="next">Next</button>
      </div>
    </div>
  </body>
</html>

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.

 

 

]]> https://www.codingnepalweb.com/multi-step-progress-bar-html-css-javascript/feed/ 0 Create Circular Progress Bar in HTML CSS & JavaScript https://www.codingnepalweb.com/progress-bar-html-css-javascript/ https://www.codingnepalweb.com/progress-bar-html-css-javascript/#respond Wed, 15 Jun 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4174 Create Circular Progress Bar in HTML CSS & JavaScript

Hello friend, I hope you are doing and creating well. Today you are going to learn to create a Circular Progress Bar in HTML CSS & JavaScript only, I will not any SVG code. There are lots of Progress Bar I have created that are horizontally progressed. Today’s progress will be circular and it will also show the percentage that it has progressed.

Circular Progress Bar is the animation of a progressing bar in a circular motion and it is used to display information like skills in some field, knowledge, and as like this. You may have seen the circular progress bar on someone’s portfolio website, where they display the ability of something that they have in the percentage value.

Have a quick look at the given image of our project [Animated Circular Progress], on the webpage. As you have seen the bluish-purple color circle is not fully closed and inside it, the value of the circle or that shape has displayed. Actually when you refreshed the webpage that will start to progress from 0 and stops at 90%. Bottom of the circular progress bar there is the text “HTML & CSS”, For example, we can understand it, the knowledge of HTML & CSS is 90%

You can watch the real demo of this project [Animated Circular Progress], by watching the video tutorial that I have given below, and of course, you will also get the idea, of how HTM and CSS code work behind this circular progressing bar.

Create Circular Progress Bar | Skills Bar | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this Circular Progress Bar, before getting into the source code file, I would like to briefly explain the video tutorial.

As you have seen in the video tutorial of our project [Animated Circular Progress Bar] when I refreshed the webpage the circle and the percentage value, started to progress from zero. As you have seen in the video, to create all the circular progressing bars I used only HTML and CSS, I did not use any SVG code, and to animate it I used some JavaScript code.

I believe, that now you can build this project [Circular Progress Bar], by using HTML CSS, and JavaScript. If you are feeling difficulty building it. I have provided all the source code files below.

You Might Like This:

Circular Progress [Source Code]

To get the following HTML CSS and JavaScript code for the Circular Progress, you need to create three files one is an HTML file and another is a CSS file and a JavaScript file. After creating these three 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.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Circular Progress Bar </title>

        <!-- CSS -->
        <link rel="stylesheet" href="css/style.css">
                                        
    </head>
    <body>
        <div class="container">
            <div class="circular-progress">
                <span class="progress-value">0%</span>
            </div>

            <span class="text">HTML & CSS</span>
        </div>

        <!-- JavaScript -->
        <script src="js/script.js"></script>
    </body>
</html>

/* Google Fonts - Poppins */
@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: #7d2ae8;
}
.container{
    display: flex;
    width: 420px;
    padding: 50px 0;
    border-radius: 8px;
    background: #fff;
    row-gap: 30px;
    flex-direction: column;
    align-items: center;
}
.circular-progress{
    position: relative;
    height: 250px;
    width: 250px;
    border-radius: 50%;
    background: conic-gradient(#7d2ae8 3.6deg, #ededed 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.circular-progress::before{
    content: "";
    position: absolute;
    height: 210px;
    width: 210px;
    border-radius: 50%;
    background-color: #fff;
}
.progress-value{
    position: relative;
    font-size: 40px;
    font-weight: 600;
    color: #7d2ae8;
}
.text{
    font-size: 30px;
    font-weight: 500;
    color: #606060;
}

 let circularProgress = document.querySelector(".circular-progress"),
    progressValue = document.querySelector(".progress-value");

let progressStartValue = 0,    
    progressEndValue = 90,    
    speed = 100;
    
let progress = setInterval(() => {
    progressStartValue++;

    progressValue.textContent = `${progressStartValue}%`
    circularProgress.style.background = `conic-gradient(#7d2ae8 ${progressStartValue * 3.6}deg, #ededed 0deg)`

    if(progressStartValue == progressEndValue){
        clearInterval(progress);
    }    
}, speed);

 

]]> https://www.codingnepalweb.com/progress-bar-html-css-javascript/feed/ 0 Animated Skills Bar in HTML & CSS | Progress Bar https://www.codingnepalweb.com/animated-skills-bar-in-html-css-progress-bar/ https://www.codingnepalweb.com/animated-skills-bar-in-html-css-progress-bar/#respond Tue, 26 Apr 2022 21:11:19 +0000 https://www.codingnepalweb.com/?p=4180 Animated Skills Bar in HTML & CSS | Progress Bar

Hello friend, I hope you are doing well. Today in this blog, you are going to learn to create an Animated Skills Bar in HTML and CSS. There are lots of progressing bars I already have created. Today’s project will be something different and useful as usual.

Skills Bar is this combination of different skills that someone has, it is like the qualification of the particular person for the particular work. For example, if someone is a front end developer, then he has the knowledge of HTML, CSS, Adobe XD and basic JavaScript.

Let’s have a quick look at the given image of our project that we are going to create [Animated Skills Bar in HTML & CSS]. On the image, we can see a total of four bars. Every bar has a different title and percentage. When the page will refresh or open that percentage of skill got animated.

For the better, you can watch the real demo of our project [Animated Skills Bar in HTML & CSS] and all the HTML and CSS codes that I have used to create this project.

Animated Skills Bar in HTML & CSS | Progress Bar

I have provided all the HTML and CSS codes that I have used to create this animated skills bar. Before getting into the source code file, I would like to explain the given video tutorial for a piece of basic information to you.

As you have seen in the video tutorial of our project [Animated Skills Bar or Progress Bar]. At first, we have seen a total of four bars with different percentages and that is the actual percentage skills someone has for example. When I refreshed the webpage all the skill bars progressed one by one with beautiful animation. As you have got the idea for the animation for the skill’s percentage bar I have used CSS animation.

Now I believe, you can build this Skills Bar with Progressing Animation using HTML and CSS. If you are feeling difficulty creating this animated skills bar, I have provided all the HTML and CSS code below.

You Might Like This:

Animated Skills Bar [Source Code]

To get the following HTML CSS for an Animated Skills Bar. 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.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!----======== CSS ======== -->
    <link rel="stylesheet" href="style.css">
    
   <title>Animated Skills Bar</title>
</head>
<body>
    <div class="container">
        <div class="skill-box">
            <span class="title">HTML</span>

            <div class="skill-bar">
                <span class="skill-per html">
                    <span class="tooltip">90%</span>
                </span>
            </div>
        </div>

        <div class="skill-box">
            <span class="title">CSS</span>

            <div class="skill-bar">
                <span class="skill-per css">
                    <span class="tooltip">70%</span>
                </span>
            </div>
        </div>
        <div class="skill-box">
            <span class="title">JavaScript</span>

            <div class="skill-bar">
                <span class="skill-per javascript">
                    <span class="tooltip">50%</span>
                </span>
            </div>
        </div>
        <div class="skill-box">
            <span class="title">NodeJS</span>

            <div class="skill-bar">
                <span class="skill-per nodejs">
                    <span class="tooltip">30%</span>
                </span>
            </div>
        </div>
    </div>
    
</body>
</html>

/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    height: 100vh;
    display: flex;
    background: #4070f4;
    align-items: center;
    justify-content: center;
}
.container{
    position: relative;
    max-width: 500px;
    width: 100%;
    background: #fff;
    margin: 0 15px;
    padding: 10px 20px;
    border-radius: 7px;
}
.container .skill-box{
    width: 100%;
    margin: 25px 0;
}
.skill-box .title{
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
.skill-box .skill-bar{
    height: 8px;
    width: 100%;
    border-radius: 6px;
    margin-top: 6px;
    background: rgba(0,0,0,0.1);
}
.skill-bar .skill-per{
    position: relative;
    display: block;
    height: 100%;
    width: 90%;
    border-radius: 6px;
    background: #4070f4;
    animation: progress 0.4s ease-in-out forwards;
    opacity: 0;
}
.skill-per.css{
    width: 70%;
    animation-delay: 0.1s;
}
.skill-per.javascript{
    width: 50%;
    animation-delay: 0.2s;
}
.skill-per.nodejs{
    width: 30%;
    animation-delay: 0.3s;
}
@keyframes progress {
    0%{
        width: 0;
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}
.skill-per .tooltip{
    position: absolute;
    right: -14px;
    top: -28px;
    font-size: 9px;
    font-weight: 500;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    background: #4070f4;
    z-index: 1;
}
.tooltip::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    height: 10px;
    width: 10px;
    z-index: -1;
    background-color: #4070f4;
    transform: translateX(-50%) rotate(45deg);

}

 

]]> https://www.codingnepalweb.com/animated-skills-bar-in-html-css-progress-bar/feed/ 0 Animated Loader in HTML & CSS https://www.codingnepalweb.com/animated-loader-in-html-css/ https://www.codingnepalweb.com/animated-loader-in-html-css/#respond Sun, 14 Nov 2021 21:11:19 +0000 https://www.codingnepalweb.com/?p=4198 Animated Loader in HTML & CSS

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.

You Might Like This:

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.
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
     <title> Website Loading Animation | CodingLab </title> 
    <link rel="stylesheet" href="style.css">
   </head>
<body>
  <section>
    <div class="dots">
      <span style="--i:1;"></span>
      <span style="--i:2;"></span>
      <span style="--i:3;"></span>
      <span style="--i:4;"></span>
      <span style="--i:5;"></span>
      <span style="--i:6;"></span>
      <span style="--i:7;"></span>
      <span style="--i:8;"></span>
      <span style="--i:9;"></span>
      <span style="--i:10;"></span>
      <span style="--i:11;"></span>
      <span style="--i:12;"></span>
      <span style="--i:13;"></span>
      <span style="--i:14;"></span>
      <span style="--i:15;"></span>
    </div>
  </section>
</body>
</html>

*{
  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;
 }
}

 

 

]]> https://www.codingnepalweb.com/animated-loader-in-html-css/feed/ 0 Button with Progress Bar using HTML CSS and JavaScript https://www.codingnepalweb.com/button-progress-bar-html-css-javascript/ https://www.codingnepalweb.com/button-progress-bar-html-css-javascript/#respond Sat, 25 Sep 2021 21:11:19 +0000 https://www.codingnepalweb.com/?p=4204 Button with Progress Bar using HTML CSS and JavaScript

Hello friends, welcome to another project on HTML CSS and JavaScript. Today in this project we are going to create a beautiful and useful design and animation. As you know I have built lots of JavaScript Projects which are very useful and practical.

A button with a progress bar means the animation appears after clicking on the button to show the user’s work is loading. Nowadays, this type of concept is getting used rapidly day by day because it takes less space on the webpage and looks very beautiful.

Let’s have a look at the given image of our program [Button with Progress Bar], the first button you are seeing will be the first look at your project and when we click on that button, its height and width will be converted into the second image and stars progressing. When the progressing bar finished progressing then that progress was converted into the button. And those texts and icons also change.

Now lets we will watch the video tutorial of this Butonn and its progressing animation. Also, we will take ideas on how all the HTML CSS, and JavaScript are working behind in the project.

Button with Progress Bar in HTML CSS JavaScript

I have provided all the HTML CSS and JavaScript code that I had have to create this project [Button with Progress Bar using HTML CSS and JavaScript], but before jumping into the source code file, I have pointed out some important points of this video tutorial of the button with progress bar.

As we have seen in the video tutorial this button with the progress bar. At first, we have seen only the button on the screen with text and a download icon. When I clicked on that button it turns into a progress bar and starts animating. At last when the progress bar finished its animation then it turned into a button with different text and icons.

To make the design of the button and progress bar, I have used HTML and CSS code only, and to make the button and progress bar animation, I have used some JavaScript code.

I believe this type of project is easy for you, those friends who are feeling difficulty building this program [Button with Progress Bar using HTML CSS and JavaScript], I have provided all HTML CSS and JavaScript source code files below.

You Might Like This:

Button with Progress Bar [Source Code]

To get the following HTML CSS and JavaScript code for the Button with Progress Bar, 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.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Button with Progress Bar | CodingLab </title> 
    <link rel="stylesheet" href="style.css">
    <!-- Boxiocns CDN Link -->
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
   </head>
<body>
  <div class="button">
      <div class="content">
        <i class="bx bx-cloud-download"></i>
        <span class="button-text">Download</span>
      </div>
  </div>
  <script>
    const button = document.querySelector(".button");
    button.addEventListener("click", () =>{
      button.classList.add("active");
      setTimeout(()=>{
        button.classList.remove("active");
        button.querySelector("i").classList.replace("bx-cloud-download", "bx-check-circle")
        button.querySelector("span").innerText = "Completed";
      },6000);
    });
  </script>
</body>
</html>

@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;
}
.button{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 95px;
  width: 360px;
  background: #7D2AE8;
  border-radius: 55px;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  overflow: hidden;
}
.button.active{
  height: 20px;
  width: 500px;
}
.button::before{
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background: #5b13b9;
  border-radius: 55px;
  transition: all 6s ease-in-out;
}
.button.active::before{
  animation: layer 6s ease-in-out forwards;
}
@keyframes layer {
  100%{
    left: 0%;
  }
}
.button .content{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  transition-delay: 0.2s;
}
.button.active .content{
  transform: translateY(60px);
}
.button .content i,
.button .content .button-text{
  color: #fff;
  font-size: 40px;
  font-weight: 500;
}
.button .content .button-text{
  font-size: 28px;
  margin-left: 8px;
}

If you face any difficulties while creating your Button with Progress Bar or your code is not working as expected, you can download the source code files for this Button with Progressing Bar 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.

]]> https://www.codingnepalweb.com/button-progress-bar-html-css-javascript/feed/ 0 Button with Progress Bar in HTML CSS and JavaScript https://www.codingnepalweb.com/button-progress-bar-animation/ https://www.codingnepalweb.com/button-progress-bar-animation/#respond Fri, 30 Jul 2021 21:11:18 +0000 https://www.codingnepalweb.com/?p=4210 Button with Progress Bar in HTML CSS and JavaScript

Hello friends, welcome to my other blog, today we are going to create a Button with progress in HTML CSS, and JavaScript. As you guys know earlier I have created a button ripple animation which you have loved so much. I hope this button with the progress bar program will be material content for you.

A progress bar is an animation that appears while the window, website, and other digital pages are going to open. The progressing bar or animation could be in different designs like in numbers, horizontal-vertical form, and circular form.

I have combined the progress bar animation inside the button as you can have a look, I have given on the webpage. Actually in this program [Button with progress bar in HTML CSS and JavaScript], at the first button, there is only one button and while we clicked on it progress bar starts and takes some time to complete. With the progress bar, we will see the changing texts of the button.

Let’s have a look at the real example of a button with progress. I highly recommend you to watch the full video tutorial then you will get an idea that how all codes are working perfectly on this program.

Video Tutorial of Button with Progress Bar

I have provided all the source code of this program[Button with Progress Bar in HTML CSS and JavaScript], Before jumping on the source code files, You have to know some important points of this program.

As you have seen in the video, at first we have seen one button with the text “Upload File” when I clicked on the button the progress bar starts appears from the left side and started to move at the right side, and the button’s text changes into the uploading” and when the progress bar completed button’s text change into “Uploaded”.

To make this progress bar animation I have used CSS animation property and to change the text I have used little JavaScript. Yeah, we could make this with only CSS code but we have to write code more that’s why rather than using the only CSS I went to JavaScript code.

I believe now you could make this program easily [Button with Progress Bar in HTML CSS and JavaScript], if you want to use the only CSS then you and done by HTML’s radio button. Those friends who are feeling difficulty building this progressing animation on the button then you can get all source code files below;

You Might Like This:

Button with Progress Bar [Source Code]

Before copying the given code of Button with Progressing Bar, 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. You can also directly download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
     <title> Button with Progress Bar | CodingLab </title> 
    <link rel="stylesheet" href="style.css">
    <!-- Boxiocns CDN Link -->
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
   </head>
<body>
  <div class="button ">
    <div class="text-icon">
      <i class="bx bx-cloud-upload"></i>
      <span class="text">Upload File</span>
    </div>
  </div>

  <script>
    const button = document.querySelector(".button"),
    text = document.querySelector(".text");

    button.addEventListener("click", ()=>{
      button.classList.add("progress");
      text.innerText = "Uploading...";

      setTimeout(()=>{
       button.classList.remove("progress"); //remove progress after 6s
       text.innerText = "Uploaded";
      },6000); //1000ms = 1s (6000 = 6s)

    });
  </script>

</body>
</html>

@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: #F4F7FF;
}
.button{
  position: relative;
  height: 55px;
  max-width: 300px;
  width: 100%;
  background: #7d2ae8;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  overflow: hidden;
}
.button::before{
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
}
.button.progress::before{
  animation: progress 6s ease-in-out forwards;
}
@keyframes progress {
  0%{
    left: -100%;
  }
  10%{
    left: -97%;
  }
  20%{
    left: -92%;
  }
  30%{
    left: -82%;
  }
  30%{
    left: -62%;
  }
  40%{
    left: -38%;
  }
  50%{
    left: -18%;
  }
  60%{
    left: -14%;
  }
  80%{
    left: -7%;
  }
  90%{
    left: -3%;
  }
  100%{
    left: 0%;
  }
}
.button .text-icon{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button .text-icon i,
.button .text-icon span{
  position: relative;
  color: #fff;
  font-size: 26px;
}
.button .text-icon span{
  font-size: 20px;
  font-weight: 400;
  margin-left: 8px;
}

If you face any difficulties while creating your Button with Progress Bar or your code is not working as expected, you can download the source code files for this Button and Progressing Bar 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.

]]> https://www.codingnepalweb.com/button-progress-bar-animation/feed/ 0