Home
Code Tutorials
CSS Tutorials

Simple Download timer With Progress bar using HTML,CSS and Javascript | Free Source Codes

Mr.Shiva
Download timer script

Steps to Create A Download Button with Timer in HTML,CSS and JavaScript

To create A Download Button with Timer, follow the given steps line by line:

  1. Create a folder. You can put any name of this folder and create the below-mentioned files inside this folder. Create a index.html file. 
  2. The file name must be index and its extension .html 
  3.  Create a style.css file. The file name must be style and its extension .css 
  4.  Create a script.js file. The file name must be script and its extension .js

Create a new file named index.html.and,Paste the following code into the file.Replace the placeholder URL https://www.example.com in the data-text attribute with your desired URL.Set the time limit by modifying the data-time attribute, replacing 5 with your preferred duration in seconds.

Customization Notes
  • URL: Replace https://www.example.com with your actual URL.
  • Time Limit: Adjust 5 to set the desired time limit in seconds.

First, paste this html codes into index.html File.


  <!DOCTYPE html>
<!-- Alpha Arp - alphaarp.blogspot.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Download Button with Timer | Alpha Arp</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
   <div id="alpha-arp-download-timer" data-text="https://www.example.com" data-time="5"></div>
   </body>
   <script src="script.js" defer></script>
</html>

Second, paste this css codes into style.css File.


  #alpha-arp-download-timer {
      text-align: center;
      padding: 20px;
      border: 1px solid #ccc;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      width: 300px;
    }

    button {
      background-color: #007bff;
      color: #fff;
      border: none;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
      margin-top: 20px;
    }

    button:hover {
      background-color: #0056b3;
    }

    #progress-container {
      position: relative;
      height: 10px;
      background: #ccc;
      border-radius: 5px;
      margin: 20px 0;
      overflow: hidden;
    }

    #progress-bar {
      height: 100%;
      background: #007bff;
      width: 0%;
      transition: width 0.1s linear;
    }

    #countdown-timer {
      margin-top: 10px;
      font-size: 14px;
    }

    #download-link {
      display: none;
    }
Create script.js file. add below java code in that file. 

  
  const container = document.getElementById('alpha-arp-download-timer');
  const downloadUrl = container.getAttribute('data-text');
  const timerDuration = parseInt(container.getAttribute('data-time'), 10) || 5;

  // Dynamically create the Start button
  const startButton = document.createElement('button');
  startButton.textContent = 'Click here';
  container.appendChild(startButton);

  // Dynamically create the progress container and progress bar
  const progressContainer = document.createElement('div');
  progressContainer.id = 'progress-container';
  progressContainer.style.display = 'none';

  const progressBar = document.createElement('div');
  progressBar.id = 'progress-bar';
  progressContainer.appendChild(progressBar);
  container.appendChild(progressContainer);

  // Dynamically create the countdown timer
  const countdownTimer = document.createElement('p');
  countdownTimer.id = 'countdown-timer';
  countdownTimer.style.display = 'none';
  container.appendChild(countdownTimer);

  // Dynamically create the Download button
  const downloadLinkButton = document.createElement('button');
  downloadLinkButton.textContent = 'Download Now';
  downloadLinkButton.id = 'download-link';
  downloadLinkButton.style.display = 'none';
  container.appendChild(downloadLinkButton);

  // Add functionality to the Start button
  startButton.addEventListener('click', () => {
    startButton.style.display = 'none';
    progressContainer.style.display = 'block';
    countdownTimer.style.display = 'block';

    let timeLeft = timerDuration;
    let elapsed = 0;
    const interval = 100; // Update progress every 100ms
    const totalUpdates = timerDuration * 1000 / interval;

    countdownTimer.textContent = `Time left: ${timeLeft}s`;

    const timer = setInterval(() => {
      elapsed++;
      const progressPercentage = (elapsed / totalUpdates) * 100;
      progressBar.style.width = `${progressPercentage}%`;

      if (elapsed % (1000 / interval) === 0) {
        timeLeft--;
        countdownTimer.textContent = `Time left: ${timeLeft}s`;
      }

      if (elapsed >= totalUpdates) {
        clearInterval(timer);
        progressContainer.style.display = 'none';
        countdownTimer.style.display = 'none';
        downloadLinkButton.style.display = 'inline-block';
        downloadLinkButton.addEventListener('click', () => {
          window.location.href = downloadUrl;
        });
      }
    }, interval);
  });

Full Download timer code


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Download Timer | Alpha Arp</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f4f4f4;
    }

    #alpha-arp-download-timer {
      text-align: center;
      padding: 20px;
      border: 1px solid #ccc;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      width: 300px;
    }

    button {
      background-color: #007bff;
      color: #fff;
      border: none;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
      margin-top: 20px;
    }

    button:hover {
      background-color: #0056b3;
    }

    #progress-container {
      position: relative;
      height: 10px;
      background: #ccc;
      border-radius: 5px;
      margin: 20px 0;
      overflow: hidden;
    }

    #progress-bar {
      height: 100%;
      background: #007bff;
      width: 0%;
      transition: width 0.1s linear;
    }

    #countdown-timer {
      margin-top: 10px;
      font-size: 14px;
    }

    #download-link {
      display: none;
    }
  </style>
</head>
<body>

<div id="alpha-arp-download-timer" data-text="https://www.example.com" data-time="5"></div>

<script>
  const container = document.getElementById('alpha-arp-download-timer');
  const downloadUrl = container.getAttribute('data-text');
  const timerDuration = parseInt(container.getAttribute('data-time'), 10) || 5;

  // Dynamically create the Start button
  const startButton = document.createElement('button');
  startButton.textContent = 'Click here';
  container.appendChild(startButton);

  // Dynamically create the progress container and progress bar
  const progressContainer = document.createElement('div');
  progressContainer.id = 'progress-container';
  progressContainer.style.display = 'none';

  const progressBar = document.createElement('div');
  progressBar.id = 'progress-bar';
  progressContainer.appendChild(progressBar);
  container.appendChild(progressContainer);

  // Dynamically create the countdown timer
  const countdownTimer = document.createElement('p');
  countdownTimer.id = 'countdown-timer';
  countdownTimer.style.display = 'none';
  container.appendChild(countdownTimer);

  // Dynamically create the Download button
  const downloadLinkButton = document.createElement('button');
  downloadLinkButton.textContent = 'Download Now';
  downloadLinkButton.id = 'download-link';
  downloadLinkButton.style.display = 'none';
  container.appendChild(downloadLinkButton);

  // Add functionality to the Start button
  startButton.addEventListener('click', () => {
    startButton.style.display = 'none';
    progressContainer.style.display = 'block';
    countdownTimer.style.display = 'block';

    let timeLeft = timerDuration;
    let elapsed = 0;
    const interval = 100; // Update progress every 100ms
    const totalUpdates = timerDuration * 1000 / interval;

    countdownTimer.textContent = `Time left: ${timeLeft}s`;

    const timer = setInterval(() => {
      elapsed++;
      const progressPercentage = (elapsed / totalUpdates) * 100;
      progressBar.style.width = `${progressPercentage}%`;

      if (elapsed % (1000 / interval) === 0) {
        timeLeft--;
        countdownTimer.textContent = `Time left: ${timeLeft}s`;
      }

      if (elapsed >= totalUpdates) {
        clearInterval(timer);
        progressContainer.style.display = 'none';
        countdownTimer.style.display = 'none';
        downloadLinkButton.style.display = 'inline-block';
        downloadLinkButton.addEventListener('click', () => {
          window.location.href = downloadUrl;
        });
      }
    }, interval);
  });
</script>

</body>
</html>

Post a Comment