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:
- Responsive Image gallery
- Responsive Navigation Bar Design using HTML and CSS
- Create a Portfolio Filter Using Html Css & Javascript
- Complete Responsive Ecommerce Website Using Html Css
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 –
