Progress Bar In jQuery

In this article, we will learn how to use the jQuery progress bar in ASP.NET .

1.  jquery progress bar is a user interface feature specifically for jQuery that is used as an indicator for the status or completion level of the processes.
2. Now, we write example to see the progress bar’s default functionality with passing parameters to the progressbar() method.

Syntax of the progressbar()

$(selector, context).progressbar({option1: value1, option2: value2….. });

Html

<div id="progressbar"><div class="progress-label">Loading...</div></div>

Css

.ui-progressbar {
    position: relative;
    color:#362878;
    width:650px;
    margin-left:auto;
    margin-right:auto;
}
  .progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
    margin-left:-40px;
  }

.ui-widget-header {
  border: 1px solid #E8D1CF;
  background: #C3AEE0 url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;
  font-weight: bold;
  margin-left:-40px;  
  
}

Javascript

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

Output :

Conclusion :

1. Progress bars are a jQueryUI element.

2. The progress bar is used to show the task or process completion state in percentage.

3. Some of the actions that can be passed, in $( element,cont).progressbar ( “action”, params ) method are –

• destroy
• disable
• enable
• option
• option( option, value )
• option( options )
• value
• value( value )
• widget

4. The event which can be used to manage the progress bar is given below –

• complete( event, ui )
• create( event, ui )
• change( event, ui )

That’s it.

I hope you guys understand how I can do this.