Progress Bar using HTML CSS & JavaScript

Hello readers today in this blog I'll be teaching you how to create a Progress Bar using HTML CSS and JavaScript, earlier I've shared on how to create a Copy Text to clipboard program using HTML CSS and JavaScript but today we'll be creating a progress bar using HTML CSS and JavaScript.

In this image preview as you can see we have a progress bar and an upload button. Before jumping into the code let me further explain this program and how it can be used in a website.

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.

A progress bar can be used in many website, a progress bar can be used in a loading page for a website, and also can be used in a Upload File program, in this upload file program you will be able to add this loading animation before file can be uploaded.

Let's have a look at the real example of this progress bar 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. 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.

Progress Bar using HTML CSS & JavaScript [Video Tutorial]

As you have seen in the of this Progress Bar using HTML CSS & JavaScript at first we have an upload button when we click on this button then you will see a progress bar loading. When this progress bar reaches 100% it stops moving and the button changes it's text

I believe now you could make this program easily [Progress Bar in HTML CSS and JavaScript], I have provided two themes of this progress bar dark and light mode if you love the dark mode you can request for it by in the comment field.

To make this progress bar animation I have used CSS animation property and to change the text I have used little. Those friends who are feeling difficulty building this progress bar animation then you can get all source code files below;

You Might Like This:

Before copying the given code of Progress 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.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>File Upload Animation using JavaScript</title>
  <!-- Boxicons CSS -->
  <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="upload" id="upload">
      <div class="text" id="text">10%</div>
    </div>
    <div class="button">
      <a href="#" id="active"><i class='bx bx-cloud-upload'></i> Upload File</a>
    </div>
  </div>
  <!--<script>
	const upload = document.querySelector(".upload"),
textupload = document.querySelector(".text"),
uploadbtn = document.querySelector(".button a");

uploadbtn.addEventListener("click", progress);
var i = 0;
function progress() {
  // progress function
  if (i == 0) {
    // if else
      i = 1
      var elem = document.getElementById("text");
      var load = document.getElementById("upload");
      var uploaded = document.getElementById("active");
      var width = 10;
      var id = setInterval(frame, 50); // this is the speed taken to upload file / or to reach the 100 goal
      function frame() {
        // frame function
        if (width >= 100){ // if width reaches 100 goal
          clearInterval(id); // clears the interval after reaching 100 goal
          i = 0;
          uploaded.innerHTML = "<i class='bx bx-check'></i> Uploaded";
          elem.classList.remove("active");
          elem.classList.add("premium");
          load.classList.add("done");
        } else {
          // else
          width++;
          load.style.width = width + "%";
          elem.innerHTML = width + "%";
          uploaded.innerHTML = "<i class='bx bx-cloud-upload'></i> Uploading";
          elem.classList.add("active");
          elem.classList.remove("premium");
          load.classList.add("show");
          load.classList.remove("done");
        }
      }
    }
  }
</script> -->
</body>
</html>

CSS CODE:

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #dff9fb;
}
.container{
  width: 100%;
  max-width: 400px;
  background: #4834d4;
  padding: 10px;
  border-radius: 3px;
  box-shadow: 0 2px 2px rgba(0,0,0,0.2);
  text-align: center;
  position: relative;
}
.container .upload{
  max-width: 500px;
  width: 10%;
  height: 100%;
  background: #341f97;
  color: #fff;
  padding: 10px;
  border-radius: inherit;
  font-size: 15px;
  opacity: 0;
}
.container .button{
  position: absolute;
  top: 99px;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform .2s ease;
}
.container .button:hover{
  transform: translate(-50%, -50%) scale(1.1);
}
.container .button a{
  width: 100%;
  background: #4834d4;
  padding: 8px 20px;
  text-decoration: none;
  border-radius: 3px;
  color: #fff;
  transition: background .2s ease;
}
.container .button a:hover{
  background: #341f97;
}
.container .text.active{
  animation: animate 0.4s linear infinite;
}
@keyframes animate {
  50%, 60%{
    opacity: 0.4;
  }
  100%{
    opacity: 1;
  }
}
/* JS Begins */
.container .text.premium{
  font-size: 20px;
  color: #fff;
}
.container .upload.show{
  opacity: 1;
}
.container .upload.done{
  background: #341f97;
  color: #111;
}

Progress Bar using HTML CSS & JavaScript

You Might Like This:

Creative Tutorials

Post a Comment

Post a Comment

Contact Form