jQuery UI Widget : Progressbar

This page discusses - jQuery UI Widget : Progressbar

jQuery UI Widget : Progressbar


jQuery UI Widget : Progressbar

This widget is used to display the progress of a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside it's parent container by default.

This is a determinate progress bar, meaning that it should only be used in situations where the system can accurately update the current status complete.

The following code line is used to place a progress bar inside a element like div :

$("#progressbar").progressbar({ value: 37 }); For options, events ,method and theming click here

For options, events ,method and theming click here



<!DOCTYPE html>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8
/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8

$(document).ready(function() {
$("#progressbar").progressbar({ value: 37 });
<body style="font-size:62.5%;">

<div id="progressbar"></div>


Output :

Download Source Code

Learn from experts! Attend jQuery Training classes.

Share on Google+Share on Google+

jQuery UI Widget : Progressbar

Posted on: April 18, 2011 If you enjoyed this post then why not add us on Google+? Add us to your Circles



Discuss: jQuery UI Widget : Progressbar  

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
June 27, 2012

If you're going to post examples, at least do something original instead of copying the damn jQuery website. Jeez.