O'Reilly logo

jQuery UI 1.10: The User Interface Library for jQuery by Dan Wellman, Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Introducing the progressbar widget

The widget is made up of just two nested <div> elements—an outer <div> container and an inner <div> container, which is used to highlight the current progress. The following diagram shows a progressbar that is 50 percent complete:

Introducing the progressbar widget

Let's take a look at the most basic progressbar implementation. In a new file in your text editor, create the following code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progressbar</title> <link rel="stylesheet" href="development-bundle/themes/redmond/jquery.ui.all.css"> <script src="js/jquery-2.0.3.js"></script> <script src="development-bundle/ui/jquery.ui.core.js"></script> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required