JQuery

Creating a Progress Bar Using JQuery And CSS

Introduction

 In this article we are going to discuss how to create a progress bar which will show a progress upon running an application using jQuery and some CSS. Let's see how it is possible to create such a type of functionality using jQuery. In further details, as we know, the progress bar means show the status of something currently in process and if it will take some time. That's why we have to use the progress bar; whatever the progress of any work is, it will show using the progress bar whether it's been completed or not, and how much it has completed and how much time it will take to complete the process so in an easier way we can say that the work is in progress and to satisfy a user we have to show it. For applying such a functionality using jQuery you have to follow the steps given below:

Step 1: In this step you have to open a new website; let's see the figure from where you have to add the website.

  • File-->New-->Website
  • Select a ASP.NET website
  • Click OK.
Step_1fig.gif

Step 2: In this step you have to add a new web form; let's see in the figure from where you have to add it.

  • Go to Solution Explorer
  • Right click on the add new item
  • Select new web page
  • Give it a name whatever you want
  • Click OK.
Step_2_1fig.gif

Step_2_2fig.gif

Step 3: In this step you have to add a style sheet code which is given below:

Code:

<style type="text/css">
.body1
    {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)),
          color-stop(15%,rgba(30,87,153,0.8)),
         color-stop(19%,rgba(30,87,153,1)),
         color-stop(20%,rgba(30,87,153,1)),
         color-stop(50%,rgba(41,137,216,1)),
         color-stop(80%,rgba(30,87,153,1)),
         color-stop(81%,rgba(30,87,153,1)),
         color-stop(85%,rgba(30,87,153,0.8)),
         color-stop(100%,rgba(30,87,153,0)));
    }
.uip_bar {
  position: relative;
  height: 35px;
  padding-right: 2px;
  background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,161,1)),
               color-stop(50%,rgba(140,51,16,1)),
               color-stop(51%,rgba(117,34,1,1)),
               color-stop(100%,rgba(191,110,78,1)));
    top: 1px;
    left: 0px;
}
.ui_p {
  position: relative;
  display: block;
  overflow: hidden;
  height: 33px; 
  background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)),
               color-stop(15%,rgba(30,87,153,0.8)),
               color-stop(19%,rgba(30,87,153,1)),
               color-stop(20%,rgba(30,87,153,1)),
               color-stop(50%,rgba(41,137,216,1)),
               color-stop(80%,rgba(30,87,153,1)),
               color-stop(81%,rgba(30,87,153,1)),
               color-stop(85%,rgba(30,87,153,0.8)),
               color-stop(100%,rgba(30,87,153,0)));
}
.ui-p span.ui_lbl {
  font-size: 2em;
  font-family:Comic Sans MS;
  position: absolute;
  right: 0;
  line-height: 33px;
  padding-right: 12px;
  color: #2a2a2a;
  white-space: nowrap;
}
 #container
{
  margin: 0 auto;
  width: 460px;
  padding: 2em;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,226,199,1)),
  color-stop(50%,rgba(193,158,103,1)),
  color-stop(51%,rgba(182,141,76,1)),
  color-stop(100%,rgba(233,212,179,1)));
}
.uip_bar {
  margin-top: 3em;
  margin-bottom: 3em;
}
</style>

Step 4: In this step we will see from where we have to add the jScript references which is given in the figure below:

Step_4_fig.gif

Step 5: In this step now you will have to see that the Jscript reference code which will be added either inside the <head></head> section or <body></body> section:

step_5fig.gif

Step 6: Now in this step we will write the jQuery code; let's see the code which is given below:

Step_6fig.gif

Step 7: In this step we will write the complete code for the Default2.aspx page which is given below:

Code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
    <title>Progress Bar</title>
 <style type="text/css">
.body1
    {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)),
          color-stop(15%,rgba(30,87,153,0.8)),
         color-stop(19%,rgba(30,87,153,1)),
         color-stop(20%,rgba(30,87,153,1)),
         color-stop(50%,rgba(41,137,216,1)),
         color-stop(80%,rgba(30,87,153,1)),
         color-stop(81%,rgba(30,87,153,1)),
         color-stop(85%,rgba(30,87,153,0.8)),
         color-stop(100%,rgba(30,87,153,0)));
    }
.uip_bar {
  position: relative;
  height: 35px;
  padding-right: 2px;
  background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,161,1)),
               color-stop(50%,rgba(140,51,16,1)),
               color-stop(51%,rgba(117,34,1,1)),
               color-stop(100%,rgba(191,110,78,1)));
    top: 1px;
    left: 0px;
}
.ui_p {
  position: relative;
  display: block;
  overflow: hidden;
  height: 33px; 
  background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)),
               color-stop(15%,rgba(30,87,153,0.8)),
               color-stop(19%,rgba(30,87,153,1)),
               color-stop(20%,rgba(30,87,153,1)),
               color-stop(50%,rgba(41,137,216,1)),
               color-stop(80%,rgba(30,87,153,1)),
               color-stop(81%,rgba(30,87,153,1)),
               color-stop(85%,rgba(30,87,153,0.8)),
               color-stop(100%,rgba(30,87,153,0)));
}
.ui_p span.ui_lbl {
  font-size: 2em;
  font-family:Comic Sans MS;
  position: absolute;
  right: 0;
  line-height: 33px;
  padding-right: 12px;
  color: #2a2a2a;
  white-space: nowrap;
}
 #container
{
  margin: 0 auto;
  width: 460px;
  padding: 2em;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,226,199,1)),
  color-stop(50%,rgba(193,158,103,1)),
  color-stop(51%,rgba(182,141,76,1)),
  color-stop(100%,rgba(233,212,179,1)));
}
.uip_bar {
  margin-top: 3em;
  margin-bottom: 3em;
}
</style>
</head>
<body class="body1">
  <div id="container">
    <div class="content">
      <h1 style="font-family: 'Comic Sans MS'; font-size: xx-large; color: #800000"> Creating progress Bar using jQuery and CSS</h1>
    </div>
    <div id="p_bar" class="uip_bar">
      <div class="ui_p" style="width: 79%;">
        <span class="ui_lbl" style="display:none;">Processing <b class="value">79%</b></span>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
  <script src="Scripts/p_bar.js" type="text/javascript" ></script>
 </body>
</html>

Step 8: In this step we will see the complete jQuery code which is given below and will be inside the jScript file named p_bar.js:

jQuery code:
   
(function( $ ){
  $.fn.animateProgress = function(progress, callback) {   
    return this.each(function() {
      $(this).animate({
        width: progress+'%'
      }, {
        duration: 2000,
        easing: 'swing',
        step: function( progress ){
          var lbl = $('.ui-label', this),
              val = $('.value', lbll);
          if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) {
            lbl.hide();
          }else{
            if (lbl.is(":hidden")) {
              lbl.fadeIn();
            };
          }
          if (Math.ceil(progress) == 100) {
            lbl.text('Done');
            setTimeout(function() {
              lbl.fadeOut();
            }, 1000);
          }else{
            val.text(Math.ceil(progress) + '%');
        },
        complete: function(scope, i, elem) {
          if (callback) {
            callback.call(this, i, elem );
          };
        }
      });
    });
  };
})(jQuery);
$(function() {
  $('#p_bar .ui_p .ui_lbl').hide();
  $('#p_bar .ui_p').css('width', '7%');
  $('#p_bar .ui_p').animateProgress(43, function() {
    $(this).animateProgress(79, function() {
      setTimeout(function() {
        $('#p_bar .ui_p').animateProgress(100, function() {
          $('#main_content').slideDown();
          $('#fork_me').fadeIn();
        });
      }, 2000);
    });
  });
});

Step 9: In this step we will see the design of the Default2.aspx page; let's see the figure which is given below:

Step_9fig.gif

Step 10: At last we have to run the Default2.aspx page by pressing F5.

Output1:

output1.gif

Output2:

output2.gif

Output3:

output3.gif

Here are some resources which may help you:

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs