Creating a Progress Bar Using JQuery And CSS

Sapna
May 15, 2012
10.6k
0
0
Article

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 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 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 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 6: Now in this step we will write the jQuery code; let's see the code which is given below:

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);
    });
});
});