Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to Create Animated Bicycle Product Card using HTML & CSS

    1 June 2025

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - JavaScript - How to make Download Button with Progress bar in HTML CSS & JavaScript
    JavaScript

    How to make Download Button with Progress bar in HTML CSS & JavaScript

    Coding StellaBy Coding Stella15 February 2024No Comments4 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    Hey folks! Today, let’s make a download button with a progress bar using HTML, CSS, and JavaScript. This project is great for anyone interested in web development, whether you’re new to coding or looking for a cool feature to add to your website.

    We’ll use HTML to set up the button, CSS to style it, and JavaScript to handle the progress bar. No need for anything too fancy – just some basic coding skills will do the trick!

    Let’s dive in and create this handy download button with a progress bar. Whether you’re a beginner or a seasoned coder, let’s have some fun making this useful feature together. Let’s get started!

    HTML :

    The provided code is an HTML document that creates a web page with a download button. It includes a <div> element with the class “button-container” that wraps the download button. The button is represented by a <div> element with the class “button” and contains an icon represented by the <i> element with the class “bx bx-cloud-download” and a text label represented by the <span> element with the class “button-text”. The code also includes links to external CSS and JavaScript files for styling and functionality.

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Download Button | Coding Stella</title>
      <link rel='stylesheet' href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css'><link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <div class="button-container">
      <div class="button">
        <div class="content">
          <i class="bx bx-cloud-download"></i>
          <span class="button-text">Download</span>
        </div>
      </div>
    <!-- partial -->
      <script  src="./script.js"></script>
    
    </body>
    </html>
    

    CSS :

    The provided code is a CSS stylesheet that sets the styling for a button element. It uses the “Poppins” font from Google Fonts and applies various styles to create a visually appealing button. The button has a fixed position and is centered on the page. When the button is active, it undergoes a transition animation that changes its height, width, and position. The button also includes an icon and text label. The code includes CSS selectors and properties to define the styles for different elements within the button.

    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Poppins", sans-serif;
    }
    .button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 95px;
      width: 370px;
      background: #5e14c6;
      border-radius: 55px;
      cursor: pointer;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      overflow: hidden;
    }
    .button.active {
      height: 20px;
      width: 500px;
    }
    .button::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      height: 100%;
      width: 100%;
      background: #4c109f;
      border-radius: 55px;
      transition: all 6s ease-in-out;
    }
    .button.active::before {
      animation: layer 6s ease-in-out forwards;
    }
    @keyframes layer {
      100% {
        left: 0%;
      }
    }
    .button .content {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      transition-delay: 0.2s;
    }
    .button.active .content {
      transform: translateY(60px);
    }
    .button .content i,
    .button .content .button-text {
      color: #fff;
      font-size: 40px;
      font-weight: 500;
    }
    .button .content .button-text {
      font-size: 28px;
      margin-left: 8px;
    }

    JavaScript:

    The provided code is a JavaScript code snippet that adds functionality to a download button. When the button is clicked, it adds the “active” class to the button, changes the icon to a checkmark, and updates the button text to “Completed”. After a delay of 3 seconds, it reverts the changes and sets the icon back to a cloud download and the button text to “Download Again”.

    The code uses the querySelector method to select the button element with the class “button” and adds a click event listener to it. Inside the event listener, it modifies the button’s class, icon, and text using various DOM manipulation methods like classList.add, classList.remove, querySelector, classList.replace, and innerText.

    const button = document.querySelector(".button");
    
    button.addEventListener("click", () => {
      button.classList.add("active");
      setTimeout(() => {
        button.classList.remove("active");
        button
          .querySelector("i")
          .classList.replace("bx-cloud-download", "bx-check-circle");
        button.querySelector("span").innerText = "Completed";
    
        setTimeout(() => {
          button
            .querySelector("i")
            .classList.replace("bx-check-circle", "bx-cloud-download");
          button.querySelector("span").innerText = "Download Again";
        }, 3000);
      }, 6000);
    });

    In conclusion, creating a download button with a progress bar using HTML, CSS, and JavaScript is a fun and practical project for both beginners and experienced developers. With just a few lines of code, you can add a useful feature to your website.

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Button
    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to make I love you Animation in HTML CSS & JavaScript
    Next Article How to make Alarm App in HTML CSS & JavaScript
    Coding Stella
    • Website

    Related Posts

    JavaScript

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025
    JavaScript

    How to create Animated No Chill Login form using HTML CSS and JS

    22 May 2025
    JavaScript

    How to create Cross Road Game using HTML CSS and JS

    2 May 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202419K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202416K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202414K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202412K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    How to make Custom File Upload Button in HTML CSS & JavaScript

    25 February 2024

    How to make Squid Game Prize Counter using HTML CSS & JavaScript

    2 April 2024

    How to Create Animated Bicycle Product Card using HTML & CSS

    1 June 2025

    How to make Sphere Packing Animation using HTML CSS & JavaScript

    7 December 2024
    Latest Post

    How to Create Animated Bicycle Product Card using HTML & CSS

    1 June 2025

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025

    How to create Animated No Chill Login form using HTML CSS and JS

    22 May 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with 💙 by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood