Frontfire DemoProgress bar
Progress bars show the progression of a task or other visualised values between a minimum and a maximum. The HTML element <progress> is too limited and thus isn't used here.
Configuration
As with many other Frontfire controls, options can be specified with the JavaScript function that enables the control from an HTML element.
If this isn’t accessible because you’re using the built-in autostart feature, or a markup declaration is preferred over code, all options can also be specified with data-opt-... HTML attributes individually or with a data-opt attribute for all options.
The option names for data attributes must be converted from camelCase to dash-case just like CSS properties are between JavaScript and CSS syntax. (Example: valuePrefix and value-prefix)
| Option | Type | Description | Default |
|---|---|---|---|
value |
Number | The initial progress value. | 0 |
min |
Number | The lower end of the progress bar. | 0 |
max |
Number | The upper end of the progress bar. | 100 |
valuePrefix |
String | The string to display before the value in the progress bar. | "" |
valueSuffix |
String | The string to display after the value in the progress bar. | "" |
Basic progress bar
Prefix: Suffix:
var value = $("#progress1").progressbar.value();
var prefix = $("#progress1").progressbar.valuePrefix();
$("#progress1").progressbar.value(value);
$("#progress1").progressbar.valuePrefix(prefix);
The value is shown as-is. If the minimum is not 0 or the maximum is not 100, the value does not represent a percentage. This can be suffixed with a total value to show absolute numbers, for example, of items processed.
Styles
Styles are set by adding one of the following CSS classes to the progress bar element.
error
The error style overrides the warning and success styles.
warning
The warning style overrides the success style.
success
no-border
The no-border style can be combined with the other styles above.
Sizes
Sizes are set by adding one of the following CSS classes to the progress bar element.
tiny
The tiny size never shows a value in its bar.
small
(normal)
button
The special size button has the height of a regular <button> element. The CSS class inline can be used to place the progress bar in a line with other content.