Create a Download Button With Timer From Google Drive

app ssiptv

10 Jul, 2024

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>

Create a Download Button With Timer From Google Drive

Create a Download Button With Timer From Google Drive

Exemple Download Button Timer

Full Code For Download Button Timer

Popular Posts

Categories

Hashtag

Blog Archive

Create a Download Button With Timer From Google Drive

Exemple Download Button Timer

Full Code For Download Button Timer

Popular Posts

Wordpress Advanced With The Custom Fields Pro

Create Simple YouTube Video Downloader Using Html css And Java

Nintendo Switch Shows Off MONSTER HUNTER RISE Edition

Auto-Resize Image Sizes Blogger posts pics

You Are Not Anonymous When Using A Proxy

Categories

Hashtag

Blog Archive