{"id":60,"date":"2023-08-25T17:43:29","date_gmt":"2023-08-25T17:43:29","guid":{"rendered":"\/\/api.jqueryui.com\/1.9\/?p=60"},"modified":"2023-08-25T17:43:29","modified_gmt":"2023-08-25T17:43:29","slug":"progressbar","status":"publish","type":"post","link":"https:\/\/api.jqueryui.com\/1.9\/progressbar\/","title":{"rendered":"Progressbar Widget"},"content":{"rendered":"<article id=\"progressbar1\" class=\"entry widget\"><h2 class=\"section-title\">\n<span>Progressbar Widget<\/span><span class=\"version-details\">version added: 1.6<\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Display status of a determinate process.<\/p>\n<section id=\"quick-nav\"><header><h2>QuickNav<a href=\"#entry-examples\">Examples<\/a>\n<\/h2><\/header><div class=\"quick-nav-section\">\n<h3>Options<\/h3>\n<div><a href=\"#option-disabled\">disabled<\/a><\/div>\n<div><a href=\"#option-max\">max<\/a><\/div>\n<div><a href=\"#option-value\">value<\/a><\/div>\n<\/div>\n<div class=\"quick-nav-section\">\n<h3>Methods<\/h3>\n<div><a href=\"#method-destroy\">destroy<\/a><\/div>\n<div><a href=\"#method-disable\">disable<\/a><\/div>\n<div><a href=\"#method-enable\">enable<\/a><\/div>\n<div><a href=\"#method-option\">option<\/a><\/div>\n<div><a href=\"#method-value\">value<\/a><\/div>\n<div><a href=\"#method-widget\">widget<\/a><\/div>\n<\/div>\n<div class=\"quick-nav-section\">\n<h3>Events<\/h3>\n<div><a href=\"#event-change\">change<\/a><\/div>\n<div><a href=\"#event-complete\">complete<\/a><\/div>\n<div><a href=\"#event-create\">create<\/a><\/div>\n<\/div><\/section><div class=\"longdesc\" id=\"entry-longdesc\">\n\t\t<p>\n\t\t\tThe progress bar is designed to display the current percent complete for a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside its parent container by default.\n\t\t<\/p>\n\t\t<p>\n\t\t\tThis is a determinate progress bar, meaning that it should only be used in situations where the system can accurately update the current status. A determinate progress bar should never fill from left to right, then loop back to empty for a single process &#x2014; if the actual status cannot be calculated, an indeterminate progress bar or spinner animation is a better way to provide user feedback.\n\t\t<\/p>\n\n\t\t<h3>Dependencies<\/h3>\n\t\t<ul>\n\t\t\t<li><a href=\"\/1.9\/category\/ui-core\/\">UI Core<\/a><\/li>\n\t\t\t<li><a href=\"\/1.9\/jQuery.widget\/\">Widget Factory<\/a><\/li>\n\t\t<\/ul>\n\t<\/div>\n<h3>Additional Notes:<\/h3>\n<div class=\"longdesc\"><ul><li>\n\t\t\tThis widget requires some functional CSS, otherwise it won&apos;t work. If you build a custom theme, use the widget&apos;s specific CSS file as a starting point.\n\t\t<\/li><\/ul><\/div>\n<section id=\"options\"><header><h2>Options<\/h2><\/header><div id=\"option-disabled\" class=\"api-item first-item\">\n<h3>disabled&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>false<\/code>\n<\/div>\n<div>Disables the progressbar if set to <code>true<\/code>.<\/div>\n<strong>Code examples:<\/strong><p>Initialize the progressbar with the <code>disabled<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">disabled<\/span>: <span class=\"hljs-literal\">true<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>disabled<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> disabled = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;disabled&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;disabled&quot;<\/span>, <span class=\"hljs-literal\">true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-max\" class=\"api-item\">\n<h3>max&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#Number\">Number<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>0<\/code>\n<\/div>\n<div>The maximum value of the progressbar.<\/div>\n<strong>Code examples:<\/strong><p>Initialize the progressbar with the <code>max<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">max<\/span>: <span class=\"hljs-number\">1024<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>max<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> max = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;max&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;max&quot;<\/span>, <span class=\"hljs-number\">1024<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-value\" class=\"api-item\">\n<h3>value&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#Number\">Number<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>0<\/code>\n<\/div>\n<div>The value of the progressbar.<\/div>\n<strong>Code examples:<\/strong><p>Initialize the progressbar with the <code>value<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">value<\/span>: <span class=\"hljs-number\">25<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>value<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> value = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;value&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;value&quot;<\/span>, <span class=\"hljs-number\">25<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div><\/section><section id=\"methods\"><header><h2>Methods<\/h2><\/header><div id=\"method-destroy\"><div class=\"api-item first-item\">\n<h3>destroy()<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>\n\t\tRemoves the progressbar functionality completely. This will return the element back to its pre-init state.\n\t<\/div>\n<ul><li><div class=\"null-signature\">This method does not accept any arguments.<\/div><\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the destroy method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar( <span class=\"hljs-string\">&quot;destroy&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/div>\n<div id=\"method-disable\"><div class=\"api-item\">\n<h3>disable()<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>\n\t\tDisables the progressbar.\n\t<\/div>\n<ul><li><div class=\"null-signature\">This method does not accept any arguments.<\/div><\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the disable method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar( <span class=\"hljs-string\">&quot;disable&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/div>\n<div id=\"method-enable\"><div class=\"api-item\">\n<h3>enable()<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>\n\t\tEnables the progressbar.\n\t<\/div>\n<ul><li><div class=\"null-signature\">This method does not accept any arguments.<\/div><\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the enable method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar( <span class=\"hljs-string\">&quot;enable&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/div>\n<div id=\"method-option\">\n<div class=\"api-item\">\n<h3>option( optionName )<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a><\/span>\n<\/h3>\n<div>Gets the value currently associated with the specified <code>optionName<\/code>.<\/div>\n<ul><li>\n<div><strong>optionName<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>The name of the option to get.<\/div>\n<\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the  method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> isDisabled = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;disabled&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<div class=\"api-item\">\n<h3>option()<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#PlainObject\">PlainObject<\/a><\/span>\n<\/h3>\n<div>Gets an object containing key\/value pairs representing the current progressbar options hash.<\/div>\n<ul><li><div class=\"null-signature\">This signature does not accept any arguments.<\/div><\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the  method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> options = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar( <span class=\"hljs-string\">&quot;option&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<div class=\"api-item\">\n<h3>option( optionName, value )<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>Sets the value of the progressbar option associated with the specified <code>optionName<\/code>.<\/div>\n<ul>\n<li>\n<div><strong>optionName<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>The name of the option to set.<\/div>\n<\/li>\n<li>\n<div><strong>value<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div>A value to set for the option.<\/div>\n<\/li>\n<\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the  method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;disabled&quot;<\/span>, <span class=\"hljs-literal\">true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<div class=\"api-item\">\n<h3>option( options )<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>Sets one or more options for the progressbar.<\/div>\n<ul><li>\n<div><strong>options<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div>A map of option-value pairs to set.<\/div>\n<\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the  method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar( <span class=\"hljs-string\">&quot;option&quot;<\/span>, { <span class=\"hljs-attr\">disabled<\/span>: <span class=\"hljs-literal\">true<\/span> } );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<\/div>\n<div id=\"method-value\">\n<div class=\"api-item\">\n<h3>value()<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#Number\">Number<\/a><\/span>\n<\/h3>\n<div>Gets the current value of the progressbar.<\/div>\n<ul><li><div class=\"null-signature\">This signature does not accept any arguments.<\/div><\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the  method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> progressSoFar = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar( <span class=\"hljs-string\">&quot;value&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<div class=\"api-item\">\n<h3>value( value )<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>Sets the current value of the progressbar.<\/div>\n<ul><li>\n<div><strong>value<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Number\">Number<\/a>\n<\/div>\n<div>The value to set.<\/div>\n<\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the  method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar( <span class=\"hljs-string\">&quot;value&quot;<\/span>, <span class=\"hljs-number\">50<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<\/div>\n<div id=\"method-widget\"><div class=\"api-item\">\n<h3>widget()<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a><\/span>\n<\/h3>\n<div>\n\t\tReturns a <code>jQuery<\/code> object containing the progressbar.\n\t<\/div>\n<ul><li><div class=\"null-signature\">This method does not accept any arguments.<\/div><\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the widget method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> widget = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar( <span class=\"hljs-string\">&quot;widget&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/div><\/section><section id=\"events\"><header><h2>Events<\/h2><\/header><div id=\"event-change\" class=\"api-item first-item\">\n<h3>change( event, ui )<span class=\"returns\">Type: <code>progressbarchange<\/code><\/span>\n<\/h3>\n<div>Triggered when the value of the progressbar changes.<\/div>\n<ul>\n<li>\n<div><strong>event<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Event\">Event<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<li>\n<div><strong>ui<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<\/ul>\n<p><em>Note: The <code>ui<\/code> object is empty but included for consistency with other events.<\/em><\/p>\n<div>\n<strong>Code examples:<\/strong><p>Initialize the progressbar with the change callback specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">change<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Bind an event listener to the progressbarchange event:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).on( <span class=\"hljs-string\">&quot;progressbarchange&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{} );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<div id=\"event-complete\" class=\"api-item\">\n<h3>complete( event, ui )<span class=\"returns\">Type: <code>progressbarcomplete<\/code><\/span>\n<\/h3>\n<div>Triggered when the value of the progressbar reaches the maximum value.<\/div>\n<ul>\n<li>\n<div><strong>event<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Event\">Event<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<li>\n<div><strong>ui<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<\/ul>\n<p><em>Note: The <code>ui<\/code> object is empty but included for consistency with other events.<\/em><\/p>\n<div>\n<strong>Code examples:<\/strong><p>Initialize the progressbar with the complete callback specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">complete<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Bind an event listener to the progressbarcomplete event:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).on( <span class=\"hljs-string\">&quot;progressbarcomplete&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{} );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<div id=\"event-create\" class=\"api-item\">\n<h3>create( event, ui )<span class=\"returns\">Type: <code>progressbarcreate<\/code><\/span>\n<\/h3>\n<div>\n\t\tTriggered when the progressbar is created.\n\t<\/div>\n<ul>\n<li>\n<div><strong>event<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Event\">Event<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<li>\n<div><strong>ui<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<\/ul>\n<p><em>Note: The <code>ui<\/code> object is empty but included for consistency with other events.<\/em><\/p>\n<div>\n<strong>Code examples:<\/strong><p>Initialize the progressbar with the create callback specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).progressbar({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">create<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Bind an event listener to the progressbarcreate event:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).on( <span class=\"hljs-string\">&quot;progressbarcreate&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{} );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/section><section class=\"entry-examples\" id=\"entry-examples\"><header><h2>Example:<\/h2><\/header><div class=\"entry-example\" id=\"example-0\">\n<p>A simple jQuery UI Progressbar<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">&quot;en&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">&quot;utf-8&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>progressbar demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">&quot;stylesheet&quot;<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/ui\/1.9.2\/themes\/base\/jquery-ui.css&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/jquery-1.8.3.js&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/ui\/1.9.2\/jquery-ui.js&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;progressbar&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;#progressbar&quot;<\/span> ).progressbar({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">value<\/span>: <span class=\"hljs-number\">37<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\" data-height=\"50\"><\/div>\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Display status of a determinate process.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-60","post","type-post","status-publish","format-standard","hentry","category-widgets"],"_links":{"self":[{"href":"https:\/\/api.jqueryui.com\/1.9\/wp-json\/wp\/v2\/posts\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jqueryui.com\/1.9\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jqueryui.com\/1.9\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.9\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.9\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":1,"href":"https:\/\/api.jqueryui.com\/1.9\/wp-json\/wp\/v2\/posts\/60\/revisions"}],"predecessor-version":[{"id":61,"href":"https:\/\/api.jqueryui.com\/1.9\/wp-json\/wp\/v2\/posts\/60\/revisions\/61"}],"wp:attachment":[{"href":"https:\/\/api.jqueryui.com\/1.9\/wp-json\/wp\/v2\/media?parent=60"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.9\/wp-json\/wp\/v2\/categories?post=60"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.9\/wp-json\/wp\/v2\/tags?post=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}