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
Centered Progress Text
The text inside a progress can be centered
Label
A progress element can contain a label
Uploading Files
Multiple Bars
A progress element can have multiple bars.
Multiple Bars with Text (Proportion)
A progress bar can contain text values indicating current proportion.
Tickets
$('.ui.multiple.progress').progress({
text: {
percent : '{bar} {percent}%',
bars: ['WIP', 'Review', 'Hold', 'Merged']
}
});
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
Indeterminate
A progress bar can be shown in different indeterminate states.
Indeterminate progress can also vary in speed
Variations
Right aligned
A progress bar can be right aligned growing to the left
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
Size
A progress bar can vary in size
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.
percent can be array of percent like [20,30,50], comma-separated string like '20,30,50' for `.ui.multiple.progress`.
|
| set progress(value) | Sets progress to specified value. Will automatically calculate percent from total.
value can be array of values like [5,3,10], comma-separated string like '5,3,10' for `.ui.multiple.progress`.
|
| 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.
value can be array of values like [5,3,10], comma-separated string like '5,3,10' for `.ui.multiple.progress`.
|
| complete(keepState) | Finishes progress and sets loaded to 100%. Set keepState to true (default false) to stop the active animation only without setting the progress 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(text, keepState) | Sets progress to warning state. Set keepState to true (default false) to keep the progressbar state and the current percentage without raising it up to 100% |
| set success(text, keepState) | Sets progress to success state. Set keepState to true (default false) to keep the progressbar state and the current percentage without raising it up to 100% |
| set error(text, keepState) | Sets progress to error state. Set keepState to true (default false) to keep the progressbar state and the current percentage without raising it up to 100% |
| 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 |
| destroy | Destroys instance and removes all events |
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 UpdateWaiting 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 | 0 | 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}',
bars : []
}
|
Text content for each state, uses simple templating with
|
| 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 | false | Provides ancillary debug output to console |
| errors |
error : {
method : 'The method you called is not defined.',
nonNumeric : 'Progress value is non numeric',
tooHigh : 'Value specified is above 100%',
tooLow : 'Value specified is below 0%'
}
|
|