Download Countdown With Modern ProgressBar :

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