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:
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>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.progressbar.js"></script>
<script>
$(document).ready(function($){
$("#myProgressbar").progressbar...
