Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Progress bar

    • 0
    • 2
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 214
    Comment on it

    A Progress bar indicates the current percentage for completeness of an operation or process.

    jQueryUI provides an easy-to-use progress bar widget that we can use to let users know the percent of completeness of an operation. jQueryUI provides progressbar() method to create progress bars. Below is an example which displays a progressbar on clicking "Start Progress" button.

    Here we have used two main events of a progressbar:

    1) change : This event is triggered whenever the value of progress bar changes.
    2) complete : This event is triggered when the progressbar reaches the maximum value .

    <html lang="en">
       <head>
          <meta charset="utf-8">
          <title>Display Progressbar using jQuery</title>
          <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
          <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
          <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
          <style>
             .ui-widget-header {
                background: #cedc98;
                border: 1px solid #DDDDDD;
                color: #333333;
                font-weight: bold;
             }
             .progress-label {
                position: absolute;
                left: 50%;
                top: 40px;
                font-weight: bold;
                color : white;
                text-shadow: 1px 1px 0 #fff;
             }
             .proressbar-class {
                background: dustyblue;
             }
          </style>
          <script>
          $(document).ready(function(){
             $("button").click(function(){
            $("button").prop("disabled",true); 
             var progressbar = $( "#myprogressbar" );
             progressLabel = $( ".progress-label" );
             $( "#myprogressbar" ).progressbar({
                value: false,
                change: function() {
                   progressLabel.text( 
                      progressbar.progressbar( "value" ) + "%" );
                },
                complete: function() {
                   progressLabel.text( "Loading Completed!" );
                   $("button").prop("disabled",false); 
                }
             });
             function progress() {
                var val = progressbar.progressbar( "value" ) || 0;
                progressbar.progressbar( "value", val + 5 );
                if ( val < 99 ) {
                   setTimeout( progress, 100 );
                }
             }
             $("#myprogressbar").css({ 'background': 'LightBlue' });
            $("#myprogressbar > div").css({ 'background': 'Blue' });
             progress();
          });
          });
       </script>
       </head>
       <body>
          <button>Start Progress</button>
          <div id="myprogressbar" >
             <div class="progress-label">
    
             </div>
          </div>
       </body>
    </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: