How to make Progress bar?

Posted on

This is your HTML CODE

<div id=”progressbar”></div>
<input id=”btnProgress” value=”Progress Bar +10%” type=”button”>

And JQuery Code is

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

<script>

$(document).ready(function() {
 var progValue = 10;
 $('#progressbar').progressbar({
        'value': 10
    });

 $('#btnProgress').click(function() {
  progValue = $('#progressbar').progressbar('value');
  progValue += 10;
  $('#progressbar').progressbar({
         'value': progValue
     });
    });
});

<script>

Note: for use any of Jquery Functionality please add the Jquery Library in your Head Section
the including library is following:
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s