Adding a countdown timer before initiating a download can improve user experience and add a professional touch to your website. This guide explains how to create two types of download countdown buttons using HTML, CSS, and JavaScript:
- Download Countdown with a Modern Progress Bar
- Download Countdown without a Progress Bar
1. Download Countdown with a Modern Progress Bar
This version uses a progress bar to visually indicate the countdown. It dynamically updates the progress bar and the remaining time.
Code Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Download Countdown with Progress Bar</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#progress-container {
width: 80%;
height: 25px;
background-color: #e0e0e0;
border-radius: 12px;
overflow: hidden;
margin: 20px auto;
display: none;
position: relative;
}
#progress-bar {
width: 0%;
height: 100%;
background-color: #007BFF;
transition: width 1s linear;
}
#progress-text {
position: absolute;
width: 100%;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 14px;
color: white;
font-weight: bold;
}
#status-text {
margin-top: 10px;
font-size: 14px;
color: gray;
}
#download-btn {
padding: 10px 20px;
font-size: 18px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}
#download-btn:hover {
background-color: #0056b3;
}
#actual-download-btn {
display: none;
padding: 10px 20px;
font-size: 18px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}
#actual-download-btn:hover {
background-color: #1e7e34;
}
</style>
<script>
function startCountdown() {
const progressContainer = document.getElementById("progress-container");
const progressBar = document.getElementById("progress-bar");
const progressText = document.getElementById("progress-text");
const statusText = document.getElementById("status-text");
const initialButton = document.getElementById("download-btn");
const downloadButton = document.getElementById("actual-download-btn");
let timeLeft = 15;
const totalTime = timeLeft;
initialButton.style.display = "none";
progressContainer.style.display = "block";
statusText.textContent = "Please Wait...";
const timer = setInterval(() => {
if (timeLeft <= 0) {
clearInterval(timer);
progressContainer.style.display = "none";
statusText.textContent = "";
downloadButton.style.display = "inline-block";
} else {
const progress = ((totalTime - timeLeft + 1) / totalTime) * 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${timeLeft}s`;
timeLeft--;
}
}, 1000);
}
</script>
</head>
<body>
<div id="progress-container">
<div id="progress-bar">
<span id="progress-text">15s</span>
</div>
</div>
<p id="status-text"></p>
<button id="download-btn" onclick="startCountdown()">Start Download</button>
<a id="actual-download-btn" href="https://google.com/" target="_blank">Download Now</a>
</body>
</html>
2. Download Countdown Without a Progress Bar
This simpler version displays a countdown message without any visual progress bar. It is lightweight and easy to integrate.
Code Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Download Countdown Without Progress Bar</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#countdown {
font-size: 24px;
font-weight: bold;
margin: 20px 0;
display: none;
}
#download-btn {
padding: 10px 20px;
font-size: 18px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}
#download-btn:hover {
background-color: #0056b3;
}
#actual-download-btn {
display: none;
padding: 10px 20px;
font-size: 18px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}
#actual-download-btn:hover {
background-color: #1e7e34;
}
</style>
<script>
function startCountdown() {
var countdownElement = document.getElementById("countdown");
var downloadButton = document.getElementById("actual-download-btn");
var initialButton = document.getElementById("download-btn");
var timeLeft = 15;
initialButton.style.display = "none";
countdownElement.style.display = "block";
var timer = setInterval(function() {
if (timeLeft <= 0) {
clearInterval(timer);
countdownElement.style.display = "none";
downloadButton.style.display = "inline-block";
} else {
countdownElement.textContent = `Your download will start in ${timeLeft} seconds...`;
timeLeft--;
}
}, 1000);
}
</script>
</head>
<body>
<p id="countdown">Your download will start in 15 seconds...</p>
<button id="download-btn" onclick="startCountdown()">Start Download</button>
<a id="actual-download-btn" href="https://google.com/" target="_blank">Download Now</a>
</body>
</html>
How to Use Inside WordPress Post or Pages ?
- It’s very easy to implement Inside any post or pages select custom html block and paste the code, must be change the download URL that is (Google.com) also you can change the download timer 15 sec to as per your need.
Complete Tutorial Video : Create A Download Button with Timer
Conclusion
Both approaches provide a countdown timer before file downloads. The first option is visually engaging with a modern progress bar, while the second is straightforward and minimalist. Choose the style that best fits your website’s design and functionality.
