Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Creating a Progress Bar with JavaScript

Progress bars are all over the web but not all are created equal. This tutorial gives you the code you need to craft a beautiful progress bar with jQuery.

Progress bars are all over the web but not all are created equal. Aside from the basic functionality of the progress bar, the design is critical to the user experience. This tutorial gives you the code you need to craft a beautiful progress bar with jQuery.

Below is the HTML, CSS, and JavaScript required.

Step 1 - Add the HTML below to where you'd like to populate your progress bar.

<div class="container">
  <div class="well">
    <p>Thank you for Downloading!</p>
    <div id="progressbar">
      <div class="progress-label">Downloading...</div>
    </div>
  </div>
</div>

Step 2 - Add the CSS below to the main stylesheet of your website

.ui-progressbar {
  position: relative;
}
#progressbar {
  background: #f5fffa;
}
.ui-progressbar .ui-progressbar-value {
  margin: 0;
}
.progress-label {
  position: absolute;
  text-align: center;
  width: 100%;
  color: #cccccc;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 20px;
}
.ui-widget-header {
  background: #ec2528;
}
p {
  text-align: center;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 26px;
}
.well {
  margin-top: 20px;
}

Step 3 - Add the JavaScript below to a file called progress.js

$(document).ready(function() {
  $( function() {
    var progressbar = $( "#progressbar" ),
    progressLabel = $( ".progress-label" );
 
    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "Complete!" );
      }
    });
 
    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;
 
      progressbar.progressbar( "value", val + 2 );
 
      if ( val < 99 ) {
        setTimeout( progress, 80 );
      }
    }
 
    setTimeout( progress, 2000 );
  } );
});

Step 4 - Add the includes below to your web page

<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Download from Github

Share on Facebook Tweet It

Matthieu McClintock
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev