Menu

Progress
A progress bar shows the progression of a task

Download

Types

Standard

A standard progress bar

Uploading Files

Indicating

An indicating progress bar visually indicates the current level of progress of a task

Funding

Content

Bar

A progress element can contain a bar visually indicating progress

Progress

A progress bar can contain a text value indicating current progress

Label

A progress element can contain a label

Uploading Files

States

Active

A progress bar can show activity

Uploading Files

Success

A progress bar can show a success state

Everything worked, your file is all ready.

Warning

A progress bar can show a warning state

Your file didn't meet the minimum resolution requirements.

Error

A progress bar can show an error state

There was an error.

Disabled

A progress bar can be disabled

Variations

Inverted

A progress bar can have its colors inverted

Uploading Files
Success
Warning
Error

Attached

A progress bar can show progress of an element

La la la la

Project
Started in 2014

Size

A progress bar can vary in size

Some small sizes may not be able to fit an inlined label
Tiny
Small
Standard
Large
Big

Color

Can have different colors:

Inverted Color

These colors can also be inverted for improved contrast on dark backgrounds

Initializing a progress bar

With metadata

A progress bar can be initialized with metadata

$('#example1').progress();
74% Funded

With Javascript

A progress bar can be initialized with a Javascript settings object

$('#example2').progress({ percent: 22 });
22% Earned

Task Completion Percent

Adding a Total Value

A progress bar can keep track of the current value as a ratio of a total value. This is useful for tracking the progress of a series of events with a known quantity, for example "uploading 1 of 20" photos.

Each call to increment will increase the value by 1, or the value specified as the second parameter

$('#example3') .progress('increment') ;
Adding Photos
$('#example3') .progress({ total: 3 }) ;

Initializing with Metadata

A progress bar can keep track of the current value as a ratio of a total value. This is useful for tracking the progress of a series of events with a known quantity, for example "uploading 1 of 20" photos.

Each call to increment will increase the value by 1, or the value specified as the second parameter

In addition you can pass in templates text for each state available to your progress bar which will automatically be updated when your progress bar reaches that state

$('#example4') .progress('increment') ;
Adding Photos

Adding Custom Labels

You can pass in templates text for each state available to your progress bar which will automatically be updated when your progress bar reaches that state

You can use label setting to change progress bar labels between two preset messages. In addition you can customize the messages themselves by specifying the templated text in text. Templated strings will replace three values on render

{percent} Current percentage
{value} Current value
{total} Total value
{left} Distance to total, or % progress left
$('#example5') .progress('increment') ;
Adding Photos
$('#example5') .progress({ text: { active : 'Adding {value} of {total} photos', success : '{total} Photos Uploaded!' } }) ;

Translation

You can also adjust text labels to help strings appear translated

$('#example6') .progress('increment') ;
Carga de archivos
$('#example6') .progress({ label: 'ratio', text: { ratio: '{value} de {total}' } }) ;

Behavior

All the following behaviors can be called using the syntax:

$('.your.element') .progress('behavior name', argumentOne, argumentTwo) ;
Behavior Description
set percent(percent) Sets current percent of progress to value. If using a total will convert from percent to estimated value.
set progress(value) Sets progress to specified value. Will automatically calculate percent from total.
increment(incrementValue) Increments progress by increment value, if not passed a value will use random amount specified in settings
decrement(decrementValue) Decrements progress by decrement value, if not passed a value will use random amount specified in settings
update progress(value) Immediately updates progress to value, ignoring progress animation interval delays
complete Finishes progress and sets loaded to 100%
reset Resets progress to zero
set total(total) Set total to a new value
get text(text) Replaces templated string with value, total, percent left and percent.
get normalized value(value) Returns normalized value inside acceptable range specified by total.
get percent Returns percent as last specified
get value Returns current progress value
get total Returns total
is complete Returns whether progress is completed
is success Returns whether progress was a success
is warning Returns whether progress is in warning state
is error Returns whether progress is in error state
is active Returns whether progress is in active state
set active Sets progress to active state
set warning Sets progress to warning state
set success Sets progress to success state
set error Sets progress to error state
set duration(value) Changes progress animation speed
set label(text) Sets progress exterior label to text
set bar label(text) Sets progress bar label to text
remove active Removes progress to active state
remove warning Removes progress to warning state
remove success Removes progress to success state
remove error Removes progress to error state

Examples

Frequently Updated Progress

Progress bar will automatically poll for the last progress value after completing an animation, so that animation easing continues to work smoothly, even if update events occur much more frequently than UI updates.

Rapidly Update
Waiting for you to press button
$('.rapid.example .ui.button') .on('click', function() { var $progress = $('.rapid.example .ui.progress'), $button = $(this), updateEvent ; // restart to zero clearInterval(window.fakeProgress) $progress.progress('reset'); // updates every 10ms until complete window.fakeProgress = setInterval(function() { $progress.progress('increment'); $button.text( $progress.progress('get value') ); // stop incrementing when complete if($progress.progress('is complete')) { clearInterval(window.fakeProgress) } }, 10); }) ; $('.rapid.example .ui.progress') .progress({ duration : 200, total : 200, text : { active: '{value} of {total} done' } }) ;

Progress Settings
Form settings modify the tab behavior

Setting Default Description
autoSuccess true Whether success state should automatically trigger when progress completes
showActivity true Whether progress should automatically show activity when incremented
limitValues true When set to true, values that calculate to above 100% or below 0% will be adjusted. When set to false, inappropriate values will produce an error.
label percent Can be set to either to display progress as percent or ratio. Matches up to corresponding text template with the same name.
random
className : { active : 'active', error : 'error', success : 'success', warning : 'warning' }
When incrementing without value, sets range for random increment value
precision 1 Decimal point precision for calculated progress
total false Setting a total value will make each call to increment get closer to this total (i.e. 1/20, 2/20 etc)
value false Sets current value, when total is specified, this is used to calculate a ratio of the total, with percent this should be the overall percent

Callbacks

Callbacks specify a function to occur after a specific behavior.

Parameters Context Description
onChange percent, value, total Progress Callback on percentage change
onSuccess total Progress Callback on success state
onActive value, total Progress Callback on active state
onError value, total Progress Callback on error state
onWarning value, total Progress Callback on warning state

DOM Settings
DOM settings specify how this module should interface with the DOM

Setting Default Description
namespace progress Event namespace. Makes sure module teardown does not effect other events attached to an element.
text
text : { active : false, error : false, success : false, warning : false, percent : '{percent}%', ratio : '{value} of {total}' }
Text content for each state, uses simple templating with {percent}, {value}, {total}
regExp
regExp: { variable: /\{\$*[A-z0-9]+\}/g }
Regular expressions used by module
selector
selector : { bar : '> .bar', label : '> .label', progress : '.bar > .progress' }
Selectors used by module
metadata
metadata: { percent : 'percent', total : 'total', value : 'value' }
DOM metadata used by module
className
className : { active : 'active', error : 'error', success : 'success', warning : 'warning' }
Class names used to attach style to state

Debug Settings
Debug settings controls debug output to the console

Setting Default Description
name Progress Name used in debug logs
silent False Silences all console output including error messages, regardless of other debug settings.
debug False Provides standard debug output to console
performance True Provides standard debug output to console
verbose True Provides ancillary debug output to console
errors
error : { method : 'The method you called is not defined.', nonNumeric : 'Progress value is non numeric' }

Dimmer Message
Dimmer sub-header