Button With Progress Bar in HTML CSS and JavaScript

In today’s blog post, we’ll be focusing on creating a button with progress using HTML, CSS, and JavaScript. As some of you may remember, I previously shared a button ripple animation tutorial that received a lot of positive feedback. I believe this new tutorial on implementing a button with a progress bar will be valuable content for you.

Buttons are one of the most fundamental elements in web design. They are used for various purposes, such as submitting forms, triggering actions, and navigating through a website. However, sometimes a simple button can seem mechanical and uninteresting. we will take a look at how to create a button with a progress bar in HTML, CSS, and JavaScript, using the concept of beautiful neumorphism.

To create a button with a neumorphism shadow style, start by designing its initial state. The button should have an HTML structure and be styled to include the Neumorphism, which makes it look like the button is popping out from the background. Neumorphism, also known as soft UI, is a visual style that gives user interfaces a modern and sleek look.

Create Button With Progress Bar in HTML CSS and JavaScript

Create a Folder: Start by creating a folder for your project. You can name it anything you like. Inside this folder, you’ll need to create the following files:

index.html (for the structure of your Progress Bar Button)
style.css (for styling the Progress Bar Button)

Create the HTML File:

Name your HTML file index.html.

Create the CSS File:

Name your CSS file style.css.

Create the JavaScript File:

Name your JavaScript file script.js.

The progress bar will be used to simulate the water-filling effect inside the button.
First we need to create a HTML structure for our button.

				
					<!DOCTYPE html>
<!-- NotArena || www.NotArena.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Progress Bar Button</title>
  <link rel="stylesheet" href="style.css">
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.ultp-block-wrapper .slick-loading .slick-list{--wpr-bg-aa0bb44f-3e57-4405-9638-23a85436006f: url('https://notarena.com/wp-content/plugins/ultimate-post/assets/img/loading.gif');}.elementor-1911 .elementor-element.elementor-element-2e43d051::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--wpr-bg-16dd9341-735b-4e1e-8cac-22fbe7b47466: url('https://i0.wp.com/notarena.com/wp-content/uploads/2024/10/BG.png?fit=1200%2C726&ssl=1');}.rll-youtube-player .play{--wpr-bg-2797e8f7-9582-42a3-98b3-1514c800616b: url('https://notarena.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".ultp-block-wrapper .slick-loading .slick-list","style":".ultp-block-wrapper .slick-loading .slick-list{--wpr-bg-aa0bb44f-3e57-4405-9638-23a85436006f: url('https:\/\/notarena.com\/wp-content\/plugins\/ultimate-post\/assets\/img\/loading.gif');}","hash":"aa0bb44f-3e57-4405-9638-23a85436006f","url":"https:\/\/notarena.com\/wp-content\/plugins\/ultimate-post\/assets\/img\/loading.gif"},{"selector":".elementor-1911 .elementor-element.elementor-element-2e43d051, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer","style":".elementor-1911 .elementor-element.elementor-element-2e43d051::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--wpr-bg-16dd9341-735b-4e1e-8cac-22fbe7b47466: url('https:\/\/i0.wp.com\/notarena.com\/wp-content\/uploads\/2024\/10\/BG.png?fit=1200%2C726&ssl=1');}","hash":"16dd9341-735b-4e1e-8cac-22fbe7b47466","url":"https:\/\/i0.wp.com\/notarena.com\/wp-content\/uploads\/2024\/10\/BG.png?fit=1200%2C726&ssl=1"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-2797e8f7-9582-42a3-98b3-1514c800616b: url('https:\/\/notarena.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"2797e8f7-9582-42a3-98b3-1514c800616b","url":"https:\/\/notarena.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
  <div class="upload-container">
    <input type="file" id="fileInput" style="display:none">
    <div class="neumorphic-btn" id="uploadBtn">
      <div class="progress-text" id="progressText">Upload File</div>
      <div class="progress-bar-fill"></div>
    </div>
  </div>

  <script>
    

const uploadBtn = document.getElementById('uploadBtn');
const fileInput = document.getElementById('fileInput');
const progressBarFill = document.querySelector('.progress-bar-fill');
const progressText = document.getElementById('progressText');

uploadBtn.addEventListener('click', () => {
  fileInput.click(); // Trigger file input click
});

fileInput.addEventListener('change', () => {
  if (fileInput.files.length > 0) {
    startUpload(); // Start upload process if file is selected
  }
});

function startUpload() {
  let progress = 0;
  progressText.textContent = '0%';
  const interval = setInterval(() => {
    progress += 10;
    progressBarFill.style.height = `${progress}%`;
    progressText.textContent = `${progress}%`;

    if (progress >= 100) {
      clearInterval(interval);
      progressText.textContent = 'Complete!';
      progressText.classList.add('complete');
      setTimeout(() => {
        resetButton();
      }, 2000); // Reset after 2 seconds
    }
  }, 300); // Simulate progress every 300ms
}

function resetButton() {
  progressBarFill.style.height = '0%';
  progressText.textContent = 'Upload File';
  progressText.classList.remove('complete');
}
  </script>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/notarena.com\/wp-admin\/admin-ajax.php","nonce":"88a6bfeef0","url":"https:\/\/notarena.com\/code-library\/button-with-progress-bar-in-html-css-and-javascript","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='http://notarena.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>

Our CSS code for styling progress bar button

				
					   * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #F4F7FF;
      font-family: 'Arial', sans-serif;
    }
    
    .upload-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    /* Neumorphic Button */
    .neumorphic-btn {
      width: 250px;
      height: 60px;
      background: #e0e0e0;
      border-radius: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 7px 7px 14px #bebebe, -7px -7px 14px #ffffff;
      overflow: hidden;
      cursor: pointer;
      font-size: 18px;
      transition: transform 0.2s ease;
    }
    
    .neumorphic-btn:hover {
      transform: scale(1.05);
    }
    
    /* Progress Fill (Water-like Effect) */
    .progress-bar-fill {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0%;
      background: linear-gradient(45deg, #6A5ACD, #48D1CC);
      border-radius: 30px;
      transition: height 0.3s ease;
    }
    
    /* Percentage Text */
    .progress-text {
      position: relative;
      z-index: 1;
      color: #333;
      font-weight: bold;
      text-align: center;
      width: 100%;
    }
    
    .complete {
      color: #ffffff;
    }

Neumorphic Button: The button has a soft, neumorphic style, with light and dark shadows creating a subtle 3D effect.
Progress Bar Fill: The progress bar, designed to simulate water filling up inside the button, starts at 0% height and gradually fills up to 100%.
Dynamic Percentage: The percentage text is dynamically updated as the progress increases.
Reset Function: After the progress reaches 100%, the button will reset back to its original state after a short delay.

Now we have it, a beautiful button with a progress bar in HTML, CSS, and JavaScript. This button not only serves its functional purpose but also adds a unique and eye-catching element to your web design. You can further modify the design by adding different colours, custom animations, and transitions.

If the code doesn’t work or if you run into any issues, please leave a comment below or reach out to us through the contact page.