Create a Download Button With Timer From Google Drive Create a Download Button With Timer From Google Drive Exemple Download Button Timer Download files Please wait ... If the download didn't start automatically, click here Full Code For Download Button Timer HTML Code: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,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; text-align: center; } .download-container { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 0.5rem; } .download-btn { background: #4285f4; color: #fff; text-decoration: none; width: 260px; padding: 18px 0; text-align: center; font-size: 1.3rem; font-weight: 400; border-radius: 5px; box-shadow: 0 5px 25px rgba(1, 1, 1, 0.15); } .download-btn:hover { background: #2345f4; } .download-btn i { margin-left: 5px; } .countdown { margin-bottom: 20px; font-size: 1.5rem; font-weight: 700; } .countdown span { color: #0693f6; font-size: 1.5em; font-weight: 800; } .pleaseWait-text, .manualDownload-text { font-size: 1.1rem; font-weight: 600; display: none; } .manualDownload-link { text-decoration: none; color: #0693f6; font-weight: 800; } </style> <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" target="_top">click here</a> </div> <script>const download = 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 = 10; download.addEventListener('click', () => { download.style.display = "none"; countdown.innerHTML = `Download will begin automatically in <span>${timeLeft}</span> seconds`; var downloadTimer = setInterval(function timeCount() { timeLeft--; countdown.innerHTML = `Download will begin automatically in <span>${timeLeft}</span> seconds`; if (timeLeft <= 0) { clearInterval(downloadTimer); pleaseWaitText.style.display = "block"; let download_href = "####"; window.location.href = download_href; manualDownloadLink.href = download_href; setTimeout(() => { pleaseWaitText.style.display = "none"; manualDownloadText.style.display = "block"; }, 1000); } }, 1000); });</script> </div> Copy Codes Copy
