Download Button With A Countdown Timer | To Download Files Automatically - HTML, CSS & Javascript | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! In this video, you will learn how to create download buttons for a website with a countdown timer to download files automatically using HTML, CSS, and Vanilla Javascript. This task is performed by only using vanilla javascript. Adding 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. Hope this video will be helpful.

Source Codes

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Countdown Timer For Download Files Automatically - HTML, CSS & Javascript</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
  </head>
  <body>

<div class="download-container">
      <a href="#" class="download-btn">Download Files <i class="fas fa-download"></i></a>
      <div class="countdown"></div>
      <div class="pleaseWait-text">Please wait..</div>
      <div class="manualDownload-text">
        If the download didn't start automatically, <a href="" class="manualDownload-link">click here.</a>
      </div>
    </div>

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

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

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

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

</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", 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: 5px;
  box-shadow: 0 5px 25px rgba(1 1 1 / 15%);
  transition: background 0.3s ease;
}

.download-btn:hover{
  background: #2874F3;
}

.download-btn i{
  margin-left: 5px;
}

.countdown{
  font-size: 1.5em;
  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: 800;
  text-decoration: none;
}

Download Source Files

If the download didn't start automatically, click here.

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

jonathan ortizMarch 31, 2021 at 2:12 PM
gracias crack
Informe NegóciosMay 13, 2021 at 5:31 PM
Thanks!
VENKATARAOTVRJune 30, 2021 at 11:53 AM
YOU ARE BEST ONE
Thiz is SamAugust 26, 2021 at 3:57 PM
can use this for blogger ?
Subir MondaNovember 24, 2021 at 3:45 AM
how to use it ??
Subir MondaNovember 25, 2021 at 5:49 AM
how to use it on blogger template
SulendarMarch 6, 2022 at 7:33 AM
Sir how to and where ? put our download link in this html code please send some screenshots
Mahasiswa PremiumMarch 11, 2022 at 2:51 PM
How to Use in Wordpress?
AnonymousApril 29, 2022 at 9:39 PM
Sir Kya Hum iske sath CSS ka use kar sakte hai jisse ek page aur uski digine achchhi ho sake
download link aur behtar bana sakte hai kya sir
AnonymousJuly 26, 2022 at 5:06 AM
That images is not showing plz I want download the image
Tulisan GuruOctober 5, 2022 at 5:58 AM
How to make multiple button download? I try it, it just could make one, when it force to make two buttons the css got and error. But thanks before 🙏

Tuesday, March 23, 2021

Download Button With A Countdown Timer | To Download Files Automatically - HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Tuesday, March 23, 2021

Download Button With A Countdown Timer | To Download Files Automatically - HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form