HomeHtml & Css ProjectDownload Button With Countdown Timer | Using Html Css Js

Download Button With Countdown Timer | Using Html Css Js

Hey friends, today in this blog you’ll learn How To Create Download Button With Countdown Timer Using Html Css Js . Earlier I’ve shared a blog on How To Create CSS Background Image Overlay . In this blog, I’m going to create a Download Button With Countdown Timer . This task is performed by only using javascript. This kind of download button to download files with a countdown timer is very beneficial for any kind of blog or website in many ways .

Video Tutorial of Download Button With Countdown Timer

You might like this:

Download Button With Countdown Timer [Source Codes]

To create this Download Button With Countdown Timer . First, you need to create Two files, HTML File , And CSS File . After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement.

# 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>

# CSS CODE

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

*{
  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.



Read More –

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

- Advertisment -

Categories