Download Button With Countdown Timer | HTML CSS Js

Hey everyone, today you’ll learn how to create a download button with countdown timer using HTML, CSS, and Js. I’ll build a Download Button With Countdown Timer on this blog. We only can perform this task with the help of Js or JavaScript. Any type of blog or website would benefit greatly from having a download button that allows users to select files and sets a countdown timer.

Contents

Video Tutorial of Download Button With Countdown Timer Download Button With Countdown Timer [Source Codes]1. HTML CODE 2. CSS CODE

Video Tutorial of Download Button With Countdown Timer

Download Button With Countdown Timer [Source Codes]

To create this Download Button With Countdown Timer. Create two files first: an HTML file and a CSS file. After creating these files, simply copy the provided source code, paste it into your text editor, and edit it as necessary.

1. HTML CODE

First, create a Html file (index.html) and paste the given codes in your CSS file.

<!DOCTYPE html>
<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">
  <script src="https://kit.fontawesome.com/e48d166edc.js" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="style.css">
  <title>Download Button With Timer</title>

</head>
<body>
  <div class="download-container">
    <a href="#" class="download-btn"> <i class="fas fa-cloud-download-alt "></i> Download Now</a>
    <div class="countdown"></div>
    <div class="pleaseWait-text">Please Wait...</div>
    <div class="manualDownload-text">Direct Link <a href="" class="manualDownload-link">click here.</a></div>
  </div>

<script type="text/javascript">
  const downloadBtn = document.querySelector(".download-btn");
  const countdown = document.querySelector(".countdown");
  const pleaseWaitText = document.querySelector(".pleaseWait-text");
  const manualDownloadText = document.querySelector(".manualDownload-text");
  const manualDownloadLink = document.querySelector(".manualDownload-link");
  var timeLeft = 5;

  downloadBtn.addEventListener("click", () => {
    downloadBtn.style.display = "none";
    countdown.innerHTML = "Your download will start in <span>" + timeLeft + "</span> seconds."  //for quick start of countdown

    var downloadTimer = setInterval(function timeCount() {
      timeLeft -= 1;
      countdown.innerHTML = "Your download will start in <span>" + timeLeft + "</span> seconds.";

      if(timeLeft <= 0){
        clearInterval(downloadTimer);
        pleaseWaitText.style.display = "block";
        let download_href = "Testfile.rar"; //enter the downlodable file link here
        window.location.href = download_href;
        manualDownloadLink.href = download_href;

        setTimeout(() => {
          pleaseWaitText.style.display = "none";
        manualDownloadText.style.display = "block"
        }, 4000);
      }
    }, 1000);
  });
  
  </script>

</body>
</html>

2. CSS CODE

Second, create a CSS file (style.css) and paste the given codes in your CSS file.

- Advertisement -

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.download-container{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.download-btn{
  position: relative;
  background: #4285F4;
  color: #fff;
  width: 260px;
  padding: 18px 0;
  text-align: center;
  font-size: 1.3em;
  font-weight: 400;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 0 5px 25px rgba(1 1 1 / 15%);
  transition:  background 0.3s ease;

}
.download-btn:hover{
  background: #1b57bd;
}
.download-btn i{
  margin-left: 5px;
}
.countdown{
  font-size: 1.1em;
  font-weight: 700;
  margin-bottom: 20px;
}
.countdown span{
  color: #0693F6;
  font-size: 1.5em;
  font-weight: 800;
}

.pleaseWait-text{
  font-size: 1.1em;
  font-weight: 600;
  display: none;
}
.manualDownload-text{
  font-size: 1.1em;
  font-weight: 600;
  display: none;
}
.manualDownload-link{
  color: #0693F6;
  font-weight: 600;
  text-decoration: none;
}

That’s all, now you’ve successfully Create a Download Button With Countdown Timer | Using Html Css Js . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button.

I Hope this blog will be helpful.

Download File