Simple Download Button With Progress bar and 30 Second Timer Source Code For Free

Author
Maddy Hunk
Created
Updated
Reading time
7 min
Views
2
Categories: Download Button, SOURCE CODE
Simple Download Button With Progress bar and 30 Second Timer Source Code For Free

How To Use Download button code in WordPress

To implement the download button code in WordPress, follow these steps:

  1. Navigate to the WordPress Admin Dashboard: Log in to your WordPress website and go to the admin dashboard.
  2. Create a New Page or Edit an Existing Page/Post: Decide where you want to add the download button. You can either create a new page or edit an existing one.
  3. Switch to Text Editor Mode: When creating or editing the page/post, switch to the text editor mode instead of the visual editor. This allows you to directly input HTML, CSS, and JavaScript code.
  4. Insert HTML Code: Paste the HTML code for the download button into the text editor. Make sure to adjust the file path in the JavaScript code to point to the correct location of your file.
  5. Add CSS Code (Optional): If you want to customize the appearance of the button, you can add the CSS code to your WordPress theme’s custom CSS area. Go to Appearance » Customize » Additional CSS and paste the CSS code there.
  6. Add JavaScript Code (Optional): Similarly, you can add the JavaScript code to your WordPress theme. Some themes offer a custom JavaScript area in the theme settings. Alternatively, you can use a plugin like “Header and Footer Scripts” to add JavaScript to the header or footer of your site.
  7. Preview and Publish: Preview the page/post to ensure that the download button appears as expected. Once you’re satisfied, publish the page/post.
  8. Test: Test the download button by clicking on it to ensure that it initiates the download of the specified file.
  9. Adjust as Needed: If there are any issues or if you want to make further adjustments, you can always go back to the page/post editor and make changes as necessary.

By following these steps, you should be able to add a download button to your WordPress website using HTML, CSS, and JavaScript code.

how to use Download button code in blogger

To use the combined HTML, CSS, and JavaScript code in a Blogger post, you can follow these steps:

  1. Go to Blogger Dashboard: Log in to your Blogger account and navigate to the Blogger dashboard.
  2. Create a New Post or Edit an Existing Post: Decide where you want to add the download button. You can either create a new post or edit an existing one.
  3. Switch to HTML Mode: When creating or editing the post, switch to the HTML mode instead of the Compose mode. This allows you to directly input HTML, CSS, and JavaScript code.
  4. Insert Combined Code: Paste the combined HTML, CSS, and JavaScript code into the HTML editor. Make sure to adjust the file path in the JavaScript code to point to the correct location of your file.
  5. Preview and Publish: Preview the post to ensure that the download button appears as expected. Once you’re satisfied, publish the post.
  6. Test: Test the download button by clicking on it to ensure that it initiates the download of the specified file.

By following these steps, you should be able to add a download button to your Blogger post using the combined HTML, CSS, and JavaScript code. Remember to adjust the file path in the JavaScript code to match the location of your file.

Download Button with Timer

Button Demo




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Download Button with Timer</title>
  <link rel="stylesheet" type="text/css" href="styles.css"> <!-- Link to external CSS file -->
</head>
<body>
<center>
<button id="downloadButton">Download</button><br><br></center>

<div id="loadingContainer">
 <div id="loadingBar"></div>
</div><br><center>
<p id="waitMessage"></p></center>
 
<script src="script.js"></script> <!-- Link to external JavaScript file -->
</body>
</html>

/* Basic button styling */
#downloadButton {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}

/* Loading container styling */
#loadingContainer {
  width: 100%; /* Adjust the width as needed */
  height: 10px;
  background-color: #ddd;
  border-radius: 5px;
  overflow: hidden; /* Hide overflowing content */
  display: none; /* Hide container by default */
}

/* Loading bar styling */
#loadingBar {
  background-color: #4CAF50; /* Loading bar color */
  width: 0; /* Initial width set to 0 */
  height: 100%;
  transition: width 0.3s; /* Transition for smooth width change */
}

/* Wait message styling */
#waitMessage {
  margin-top: 10px;
  display: none; /* Hide message by default */
}

document.getElementById("downloadButton").onclick = function() {
  var button = document.getElementById("downloadButton");
  var loadingContainer = document.getElementById("loadingContainer");
  var loadingBar = document.getElementById("loadingBar");
  var waitMessage = document.getElementById("waitMessage");
  var width = 0; // Set initial width to 0
  button.disabled = true; // Disable the button
  button.innerText = "Generating link..."; // Change button text
  loadingContainer.style.display = "block"; // Show loading container
  waitMessage.style.display = "block"; // Show wait message
  waitMessage.innerText = "Please wait for "; // Set wait message

 // Start the timer
var seconds = 30;
var increment = 100 / seconds; // Calculate the increment per second
var timer = setInterval(function() {
  if (width >= 100) {
    clearInterval(timer);
    button.disabled = false; // Enable the button
    button.innerText = "Download"; // Restore button text
    waitMessage.innerText = ""; // Clear wait message
  } else {
    width += increment;
    loadingBar.style.width = width + '%';
    waitMessage.innerText = "Please wait for " + seconds + " seconds"; // Update wait message
    seconds--;
  }
}, 1000); // 1000 milliseconds = 1 second


  // After 30 seconds (30000 milliseconds), initiate the download
  setTimeout(function() {
    // Replace 'path_to_file' with the actual path to your file
    window.location.href = 'path_to_file';
  }, 30000);
};

Replace 'path_to_file' in the JavaScript code with the actual path to your file that you want to be downloaded when the button is clicked. Ensure that the file is accessible through the provided path.

Related posts