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
Size
A progress bar can vary in size
Tiny
Small
Standard
Large
Big
Color
Can have different colors:
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
$('#example4')
.progress()
;
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 |
$('#example4')
.progress('increment')
;
Adding Photos
$('#example4')
.progress({
text: {
active : 'Adding {value} of {total} photos',
success : '{total} Photos Uploaded!'
}
})
;
Translation
You can also adjust text labels to help strings appear translated
$('#example5')
.progress('increment')
;
Carga de archivos
$('#example5')
.progress({
label: 'ratio',
text: {
ratio: '{value} de {total}'
}
})
;
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 progres 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 |
| 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'
}
|
|