Button with 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 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