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);
});
});
});
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 10: At last we have to run the
Default2.aspx page by pressing F5.
Output1:
Output2:
Output3:
Here are some resources which may help you: