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:
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> ...