Frontfire documentation

Progressbar plugin

Version 2.1.0

Frontfire UI provides a progress bars component that shows the progression of a task or other visualised values between a minimum and a maximum. The HTML element <progress> is too limited and thus is not used here.

This plugin is only available in the Complete bundle.

Description

A progress bar is defined with the progressbar CSS class, or by calling the progressbar() plugin method on an element.

The progress bar colours can be customised with the CSS variables that start with “--progress-”.

Prefix: Suffix:

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. If the label text does not fit inside the bar, it is placed outside of it.

Styles

Colours

Styles are set by adding one of the CSS classes error, warning or success to the progress bar element.

The bar colours can also be changed with CSS variables.

no-border

The no-border style can be combined with the other styles above.

Sizes

Sizes are set by adding one of the CSS classes tiny, small, large or big to the progress bar element. The tiny size never shows a value in its bar.

tiny

small

(normal)

large

big

button

The special size button has the height of a regular <button> element. The inline CSS class can be used to place the progress bar in a line with other content.

Options

The following options are available:

Name Type Description Default
max Number The maximum value of the progress bar. 100
min Number The minimum value of the progress bar. 0
value Number The current progress value. 0
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. ""

Plugin properties

This plugin provides properties to access the progress bar state.

min

Gets the minimum value of the first selected node, or sets the minimum value of all selected nodes.

F("#progressbar1").progressbar.min = 10;

max

Gets the maximum value of the first selected node, or sets the maximum value of all selected nodes.

F("#progressbar1").progressbar.max = 200;

value

Gets the current progress bar value of the first selected node, or sets the current progress bar value of all selected nodes.

F("#progressbar1").progressbar.value = 80;

valuePrefix

Gets the value prefix of the first selected node, or sets the value prefix of all selected nodes.

F("#progressbar1").progressbar.valuePrefix = "File ";

valueSuffix

Gets the value suffix of the first selected node, or sets the value suffix of all selected nodes.

F("#progressbar1").progressbar.valueSuffix = "%";

Plugin methods

This plugin provides methods to control the progress bar.

deinit

Deinitializes the plugin and removes the progress bar from the elements.

Plugin events

This plugin triggers events for the progress bar.

change

Triggered when the progress bar value has changed. The following properties are provided with the event: