ProgressBar

A progress bar widget which displays a horizontal progress bar with optional label and value text.

Progress bar

//<code-header>
fiddle.title = 'Progress bar';
//</code-header>
new ProgressBar({
    appendTo  : targetElement,
    label     : 'Backend API Dev.',
    valueText : 'All done',
    value     : 1
});

new ProgressBar({
    appendTo : targetElement,
    label    : 'Frontend',
    valueRenderer(value) {
        return `${value}/${this.max} tasks`;
    },
    max   : 12,
    value : 4,
    color : 'blue'
});

new ProgressBar({
    appendTo  : targetElement,
    label     : 'Database',
    valueText : '3/8 tasks',
    value     : 3 / 8,
    color     : 'orange'
});

new ProgressBar({
    appendTo  : targetElement,
    label     : 'Documentation',
    valueText : '1/5 tasks',
    value     : .2,
    color     : 'red'
});

new ProgressBar({
    appendTo  : targetElement,
    label     : 'Code Review',
    valueText : '10/15 tasks',
    value     : .67,
    color     : 'purple'
});

Configs

Common

listenersEvents

Other

color: ColorAlso a property

Color of the progress bar ('b-green', 'b-yellow', 'b-orange', etc.)

label: StringAlso a property

The label text to display at the top left

max: NumberAlso a property

Maximum value for progress calculation. When specified, value is treated as absolute.

value: NumberAlso a property

Progress value. If max is specified, this is an absolute value (e.g., 8 out of 10). If max is not specified, this should be between 0 and 1 (e.g., 0.5 for 50%)

valueRenderer: functionAlso a property

Template function that can be used to customize the displayed value

Parameter	Type	Description
`value`	Number	The value to provide a textual value for
`max`	Number	The max value of the progress bar

Returns: String | Number | null

valueText: StringAlso a property

The value text to display at the top right If not specified and max is provided, will auto-generate as "value/max"

callOnFunctionsWidget

catchEventHandlerExceptionsEvents

columnWidget

detectCSSCompatibilityIssuesWidget

rtlRTL

spanWidget

Accessibility

ariaDescriptionWidget

ariaLabelWidget

keyMapKeyMap

CSS

clsWidget

contentElementClsWidget

htmlClsWidget

styleWidget

uiWidget

DOM

adoptWidget

appendToWidget

contentWidget

datasetWidget

htmlWidget

idWidget

insertBeforeWidget

insertFirstWidget

tagWidget

titleWidget

Float & align

alignWidget

anchorWidget

centeredWidget

constrainToWidget

draggableWidget

floatingWidget

hideAnimationWidget

maximizeOnMobileWidget

positionedWidget

scrollActionWidget

showAnimationWidget

xWidget

yWidget

Layout

alignSelfWidget

dockWidget

flexWidget

heightWidget

hiddenWidget

marginWidget

maxHeightWidget

maxWidthWidget

minHeightWidget

minWidthWidget

textAlignWidget

weightWidget

widthWidget

Misc

bubbleEventsEvents

dataFieldWidget

defaultBindPropertyWidget

disabledWidget

elementAttributesWidget

ignoreParentReadOnlyWidget

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

maskDefaultsWidget

maskedWidget

monitorResizeWidget

ownerWidget

preventTooltipOnTouchWidget

readOnlyWidget

refWidget

rippleWidget

rootElementWidget

showTooltipWhenDisabledWidget

tabWidget

tooltipWidget

Scrolling

scrollableWidget

Properties

Class hierarchy

isProgressBar: Boolean= truereadonly

Identifies an object as an instance of ProgressBar class, or subclass thereof.

isProgressBar: Boolean= truereadonlystatic

Identifies an object as an instance of ProgressBar class, or subclass thereof.

isDelayableDelayable

isEventsEvents

isKeyMapKeyMap

isLocalizableLocalizable

isRTLRTL

isWidgetWidget

Other

color: ColorAlso a config

Color of the progress bar ('b-green', 'b-yellow', 'b-orange', etc.)

label: StringAlso a config

The label text to display at the top left

max: NumberAlso a config

Maximum value for progress calculation. When specified, value is treated as absolute.

value: NumberAlso a config

Progress value. If max is specified, this is an absolute value (e.g., 8 out of 10). If max is not specified, this should be between 0 and 1 (e.g., 0.5 for 50%)

valueRenderer: functionAlso a config

Template function that can be used to customize the displayed value