How To Make Progress Bar in HTML CSS JAVASCRIPT

How to Create a Button with Progress Bar Using HTML & CSS & JAVASCRIPT, hi guys in today’s topic we’re gonna create an awesome Progress bar with a button, and also I’m going to show you how you can show the percentage of progress on top of the button and progress bar. So, stay tuned and watch the video below.

What is a Progress Bar?

May ask yourself what is a progress bar and where we can use this kind of elements, well is your lucky day 🙂 because I’m gonna tell you all about it!

you see, I’m sure you guys have already seen a lot of progress bars however you may not notice it. A progress bar is an element that shows how much of a particular action is already done and how much further is left.

What is the job of a Progress Bar?

As a developer, you can use Progress bars in order to make your website or application more user-friendly. because you see, users are always busy! and they don’t like to wait too much, however many of them actually don’t have anything to do, still, they don’t wanna waste one-second waiting on your website!

Well, I guess now you got what a progress bar does! they hold the user for us to avoid leaving our website and our application! It shows users how much further they need to wait and this is practical and kind of cool, at least I think so!

HTML Codes

Here you can find the HTML codes for this project.

<!DOCTYPE html>
<!-- Coding by Navid Dev - naviddev.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Navid Dev - Button with Progress Bar</title>
    <link rel="stylesheet" href="style.css" />
    <!-- Boxiocns CDN Link -->
    <link
      href="https://unpkg.com/[email protected]/css/boxicons.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="progress-bar">
      <p class="percent"><span class="num"></span> <span>%</span></p>
      <div class="button">
        <div class="content">
          <i class="bx bx-cloud-download"></i>
          <span class="button-text">Download</span>
        </div>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS Codes

Here you can find the CSS codes for this project.

@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;
}
body {
  font-family: "Poppins", sans-serif;
  background-color: #cfe9ff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  position: relative;
  height: 95px;
  width: 360px;
  background: #2a3de8;
  border-radius: 55px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  overflow: hidden;
}
.button .content {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  transition-delay: 0.2s;
}

.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;
}

.percent {
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.2s ease-in-out;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background: #2a3de8;
  border-radius: 55px;
  transition: all 6s ease-in-out;
}
.progress-bar.active .button::before {
  animation: layer 6s ease-in-out forwards;
}
.progress-bar.active .button {
  height: 20px;
  width: 500px;
  background: #a7a7a7;
}
.progress-bar.active .button .content {
  transform: translateY(60px);
}
.progress-bar.active .percent {
  transform: translate(0);
}
@keyframes layer {
  100% {
    left: 0;
  }
}

JAVASCRIPT Codes

Here you can find the JAVASCRIPT codes for this project.

const button = document.querySelector(".button"),
  progressBar = document.querySelector(".progress-bar"),
  percentNum = document.querySelector(".num");

let percent = 0;
let percentInterval = null;

button.addEventListener("click", () => {
  percentInterval = setInterval(() => {
    percent++;
    percentNum.innerText = percent;
  }, 60);

  progressBar.classList.add("active");
  setTimeout(() => {
    progressBar.classList.remove("active");
    button
      .querySelector("i")
      .classList.replace("bx-cloud-download", "bx-check-circle");
    button.querySelector("span").innerText = "Completed";
    clearInterval(percentInterval);
    percent = 0;
  }, 6000);
});

Sum up

Alright to sum up, in this topic we created a handy Button with a Progress Bar, so if you have any questions about this post, feel free to drop your questions in the comment section below. Cheers!

JavaScript Projects