Download Button with Progress Bar using JavaScript

Hey friends welcome to another blog post, I know I haven't posted for a long time now and I apologize for that, as usual, we create amazing things using HTML CSS, and JavaScript today in this blog you're going to learn how to create this Download Button with Progress Bar using HTML CSS and JavaScript.

I have uploaded many JavaScript projects on my channel. Today is different and new as usual. Before diving deep into the source code, let me explain what this download button is, what it does, and how it can be used in your projects/website.

Download button with progress means an animation that appears after clicking on the button to show the user's work is loading. Different users use this type of content daily because this program can be used in school, work, etc.

Now let's have a look at the given image of our program [Download Button with Progress Bar]. The first image seen at the top is we have our download button with our progress bar and at the bottom, you can see a completed button indicating that the download has been completed.

Download Button with Progress Bar in HTML CSS JavaScript [Video Tutorial]

I have provided all source code for this project but before jumping into the source code file let me furthermore explain how this project is going to be used or implemented.

As I have provided above the video tutorial you can see that the progress bar counting only began when I clicked the download files button, after loading has finished you also saw that my files got automatically downloaded and saved on my downloads. This project or program can be used as I have mentioned earlier in schools, work, etc. you can use this also in your own aspects where users can download your CV for example in a portfolio.

To make the design of the download button with progress bar, I have used HTML and CSS code only, and to make 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 [Download Button with Progress Bar using HTML CSS and JavaScript], I have provided all HTML CSS and JavaScript source code file below.

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.

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>Download Button with Progress Bar</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="wrapper">
      <div class="box" id="download">
        <div class="bar" id="text">10%</div>
      </div>
      <div class="download">
        <a href="#" id="active"><i class='bx bxs-cloud-download'></i> Download Files</a>
      </div>
    </div>
    <script src="script.js"></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: #ecf0f1;
}
.wrapper{
  width: 100%;
  max-width: 400px;
  height: 30px;
  background: #273c75;
  border-radius: 5px;
  text-align: center;
}
.wrapper .box{
  width: 10%;
  height: 30px;
  background: #3742fa;
  border-radius: 5px;
  color: #fff;
  font-size: 20px;
  opacity: 0;
}
.download a{
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 10px 20px;
  background: #3742fa;
  text-decoration: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 5px;
}
.download a i{
  margin-right: 5px;
}
.download{
  margin-top: 30px;
}
/* JS Begins */
.wrapper .bar.premium{
  font-size: 20px;
  color: #fff;
}
.wrapper .box.show{
  opacity: 1;
}
.wrapper .box.done{
  background: #2ed573;
  color: #fff;
}
.wrapper .bar.active{
  animation: animate 0.4s linear infinite;
}
@keyframes animate {
  50%, 60%{
    opacity: 0.4;
  }
  100%{
    opacity: 1;
  }
}
.wrapper .button a.bo{
  background: #2ed573;
}

JAVASCRIPT CODE:

const download_box = document.querySelector(".box"),
download_text = document.querySelector(".bar"),
download_btn = document.querySelector(".download a");

download_btn.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("download");
      var downloaded = document.getElementById("active");
      var width = 10;
      var id = setInterval(frame, 50); // this is the speed taken to download file / or to reach the 100 goal
      function frame() {
        // frame function
        if (width >= 100){ //if width reaches 100%
          clearInterval(id); // clears the interval after reaching 100%
          i = 0; // set i to 0
          downloaded.innerHTML = "<i class='bx bxs-check-circle' ></i> Completed";
          elem.classList.remove("active");
          elem.classList.add("premium");
          load.classList.add("done");
          downloaded.style.background = "#2ed573";
          // Now create this code to download file when download is done/finished
          function download(fileUrl, fileName) {
            var a = document.createElement("a");
            a.href = fileUrl;
            a.setAttribute("download", fileName);
            a.click();
          }
          download("https://drive.google.com/u/0/uc?id=1_VhbT22YEsanKX-mh7Q5A0Rcu3LNE8kr&export=download")
        } else{
          // else
          width++;
          load.style.width = width + "%";
          elem.innerHTML = width + "%";
          downloaded.innerHTML = "<i class='bx bxs-cloud-download bx-flashing' ></i> Downloading";
          elem.classList.add("active");
          elem.classList.remove("premium");
          load.classList.add("show");
          load.classList.remove("done");
          downloaded.style.background = "#3742fa";
        }
      }
    }
}

That's all now you've successfully created this Download Button with a progress bar. If you faced difficulty understanding or copying the source code you can just download the source code file from the given download button, extract the file, and use it.

Download Button with Progress Bar using JavaScript

Download Button with Progress Bar in HTML CSS JavaScript [Video Tutorial]

Creative Tutorials

Post a Comment

Post a Comment

Contact Form