jQuery UI Progressbar

jQuery UI Progressbar displays progress toward a known maximum. The minimum is fixed at 0; set max and value to describe the current state.

Basic Progressbar Top ↑

$( function () {
    $( "#progress_bar" ).progressbar({
        value: 40,
        max: 100
    });
});

The older page included min: 0. jQuery UI Progressbar does not expose a configurable min option; the minimum is 0.

Maximum and Current Value Top ↑

$( "#progress_bar" ).progressbar({
    value: 40,
    max: 100
});

The Progressbar range is from 0 to max.

Read the Current Value Top ↑

const presentValue =
    $( "#progress_bar" ).progressbar( "value" );

The generic option API also works:

const presentValue =
    $( "#progress_bar" ).progressbar(
        "option",
        "value"
    );

Set the Value Top ↑

$( "#progress_bar" ).progressbar(
    "value",
    60
);

Keep values within the intended 0-to-max range in your application logic.

Change the Value Dynamically Top ↑

Button clicks can increase or decrease the current value.

Related tutorial: jQuery click event →

Demo: increase/decrease Progressbar value →

Demo: read one Progressbar and update a second →

Enable and Disable Progressbar Top ↑

$( "#progress_bar" ).progressbar( "disable" );
$( "#progress_bar" ).progressbar( "enable" );

The original checkbox example is preserved and now uses .prop("checked") with .on("change").

Related tutorial: checkbox properties →

Demo: enable/disable Progressbar with a checkbox →

Indeterminate Progress Top ↑

Use value: false when progress is active but the amount completed is not known.

$( "#progress_bar" ).progressbar({
    value: false
});

Progressbar Events Top ↑

The change event runs when the value changes, and complete runs when the value reaches the maximum.

$( "#progress_bar" ).progressbar({
    value: 0,
    max: 100,

    change: function () {
        console.log(
            "Value:",
            $( this ).progressbar( "value" )
        );
    },

    complete: function () {
        console.log( "Complete" );
    }
});

Textarea Character Counter Top ↑

A Progressbar can visualize how much of a textarea character limit has been used.

Demo: textarea counter with Progressbar →

Progressbar Demo Pages Top ↑

• Increase or decrease the value with buttons
• Enable or disable with a checkbox
• Use one Progressbar value to update another

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: