ProgressBar JAVASCRIPT UI Component API

ProgressBar Javascript API

Class

ProgressBar

ProgressBar

Progress indicators. It can be used to show a user how far along he/she is in a process.

Selector

smart-progress-bar

Properties

AanimationSets or retrieves the current animation mode for the element. When this property is set to 'none', all animations are disabled and the element will not perform any animated transitions. Otherwise, specifying a different value enables the corresponding animation behavior.
DdisabledSpecifies whether the element is active and interactive (enabled) or inactive and unresponsive to user input (disabled). When set to true, the element is disabled and cannot be interacted with; when set to false, the element remains enabled and fully functional.
IindeterminateSets the Progress bar’s value to the indeterminate state (by assigning null), which triggers and starts the loading animation. In the indeterminate state, the Progress bar does not display a fixed value but instead shows a continuous animation to indicate ongoing activity or loading without specifying progress percentage.
IinvertedSpecifies the direction in which the Progress Bar fills as its value increases, such as left to right, right to left, top to bottom, or bottom to top.
FformatFunctionA callback function that specifies how to generate or customize the label displayed on the Progress Bar. This function receives relevant data (such as the current progress value) as input and returns a string that determines the label format shown to users. Use this to personalize label content, such as displaying percentages, custom text, or additional information.
UunlockKeyGets or sets the unlockKey property, which serves as the authorization code required to activate and access the product’s full features.
LlocaleDefines or retrieves the current language setting for the component. This property determines which language is used for displaying text and messages, and works together with the messages property to select the appropriate localized strings. Adjusting this property updates the displayed language dynamically based on the provided message translations.
LlocalizeFormatFunctionCallback function associated with the localization module, typically invoked to handle language changes, load localized resources, or update content based on the selected locale.
MmaxDefines the highest value that the progress bar can represent, establishing the upper limit for progress tracking. This value determines when the progress bar is considered 100% complete.
MmessagesDefines an object containing string values that represent the various states of password strength (e.g., "weak", "medium", "strong"). These values can be used to display contextual feedback to users based on the evaluated strength of their password.
MminDefines the lowest allowable value for the progress bar, representing the starting point from which progress is measured. This sets the minimum boundary for the progress indicator’s range.
OorientationSpecifies whether the progress bar is displayed horizontally or vertically. Adjusting this property changes the direction in which the progress indicator fills.
RrightToLeftSpecifies or retrieves a value that determines whether the element's alignment supports right-to-left (RTL) text direction, typically used for languages such as Arabic or Hebrew. When enabled, the element's content and layout will be adjusted to accommodate RTL locales.
SshowProgressValueControls the visibility of the label for the Progress Bar. When enabled, the label will be displayed; when disabled, the label will be hidden.
TthemeSpecifies the theme that controls the visual style and appearance of the element, including aspects such as colors, fonts, and overall design. Selecting a theme customizes how the element is displayed to users.
UunfocusableIf set to true, this property prevents the element from receiving keyboard focus, making it unreachable via keyboard navigation such as the Tab key.
VvalueRetrieves the current value of the progress bar or sets it to a specified value, updating the visual representation accordingly. This value typically indicates the progress of a task as a numeric value within a defined range (e.g., 0 to 100).

Events

CchangeThis event is triggered whenever the value of the associated input or component is modified by the user or via programmatic changes. It provides an opportunity to respond in real time to updates, such as validating input, updating the UI, or synchronizing data with other components.

Properties

animation"none" | "simple" | "advanced"

Sets or retrieves the current animation mode for the element. When this property is set to 'none', all animations are disabled and the element will not perform any animated transitions. Otherwise, specifying a different value enables the corresponding animation behavior.

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property. 

 <smart-progress-bar animation='none'></smart-progress-bar>

Set the animation property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.animation = 'simple';

Get the animation property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let animation = progressbar.animation;

disabledboolean

Specifies whether the element is active and interactive (enabled) or inactive and unresponsive to user input (disabled). When set to true, the element is disabled and cannot be interacted with; when set to false, the element remains enabled and fully functional.

Default value

false

Example

Set the disabled property. 

 <smart-progress-bar disabled></smart-progress-bar>

Set the disabled property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.disabled = false;

Get the disabled property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let disabled = progressbar.disabled;

indeterminateboolean

Sets the Progress bar’s value to the indeterminate state (by assigning null), which triggers and starts the loading animation. In the indeterminate state, the Progress bar does not display a fixed value but instead shows a continuous animation to indicate ongoing activity or loading without specifying progress percentage.

Default value

false

Example

Set the indeterminate property. 

 <smart-progress-bar indeterminate></smart-progress-bar>

Set the indeterminate property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.indeterminate = false;

Get the indeterminate property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let indeterminate = progressbar.indeterminate;

invertedboolean

Specifies the direction in which the Progress Bar fills as its value increases, such as left to right, right to left, top to bottom, or bottom to top.

Default value

false

Example

Set the inverted property. 

 <smart-progress-bar inverted></smart-progress-bar>

Set the inverted property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.inverted = false;

Get the inverted property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let inverted = progressbar.inverted;

formatFunction{(value: number): string}

A callback function that specifies how to generate or customize the label displayed on the Progress Bar. This function receives relevant data (such as the current progress value) as input and returns a string that determines the label format shown to users. Use this to personalize label content, such as displaying percentages, custom text, or additional information.

Example

Set the formatFunction property. 

 <smart-progress-bar format-function='function(value) { return value + "$" }'></smart-progress-bar>

Set the formatFunction property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.formatFunction = function(value) { return "$" + value };

Get the formatFunction property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let formatFunction = progressbar.formatFunction;

unlockKeystring

Gets or sets the unlockKey property, which serves as the authorization code required to activate and access the product’s full features.

Default value

""

Example

Set the unlockKey property. 

 <smart-progress-bar unlock-key=''></smart-progress-bar>

Set the unlockKey property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let unlockKey = progressbar.unlockKey;

localestring

Defines or retrieves the current language setting for the component. This property determines which language is used for displaying text and messages, and works together with the messages property to select the appropriate localized strings. Adjusting this property updates the displayed language dynamically based on the provided message translations.

Default value

"en"

Example

Set the locale property. 

 <smart-progress-bar locale='de'></smart-progress-bar>

Set the locale property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.locale = 'fr';

Get the locale property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let locale = progressbar.locale;

localizeFormatFunctionfunction | null

Callback function associated with the localization module, typically invoked to handle language changes, load localized resources, or update content based on the selected locale.

Example

Set the localizeFormatFunction property. 

 <smart-progress-bar localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-progress-bar>

Set the localizeFormatFunction property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let localizeFormatFunction = progressbar.localizeFormatFunction;

maxnumber

Defines the highest value that the progress bar can represent, establishing the upper limit for progress tracking. This value determines when the progress bar is considered 100% complete.

Default value

100

Example

Set the max property. 

 <smart-progress-bar max='10'></smart-progress-bar>

Set the max property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.max = 50;

Get the max property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let max = progressbar.max;

messagesobject

Defines an object containing string values that represent the various states of password strength (e.g., "weak", "medium", "strong"). These values can be used to display contextual feedback to users based on the evaluated strength of their password.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Example

Set the messages property. 

 <smart-progress-bar messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}'></smart-progress-bar>

Set the messages property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Get the messages property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let messages = progressbar.messages;

minnumber

Defines the lowest allowable value for the progress bar, representing the starting point from which progress is measured. This sets the minimum boundary for the progress indicator’s range.

Default value

0

Example

Set the min property. 

 <smart-progress-bar min='5'></smart-progress-bar>

Set the min property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.min = 10;

Get the min property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let min = progressbar.min;

orientation"horizontal" | "vertical"

Specifies whether the progress bar is displayed horizontally or vertically. Adjusting this property changes the direction in which the progress indicator fills.

Default value

"horizontal"

Example

Set the orientation property. 

 <smart-progress-bar orientation='horizontal'></smart-progress-bar>

Set the orientation property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.orientation = 'vertical';

Get the orientation property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let orientation = progressbar.orientation;

rightToLeftboolean

Specifies or retrieves a value that determines whether the element's alignment supports right-to-left (RTL) text direction, typically used for languages such as Arabic or Hebrew. When enabled, the element's content and layout will be adjusted to accommodate RTL locales.

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

 <smart-progress-bar right-to-left></smart-progress-bar>

Set the rightToLeft property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.rightToLeft = false;

Get the rightToLeft property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let rightToLeft = progressbar.rightToLeft;

showProgressValueboolean

Controls the visibility of the label for the Progress Bar. When enabled, the label will be displayed; when disabled, the label will be hidden.

Default value

false

Example

Set the showProgressValue property. 

 <smart-progress-bar show-progress-value></smart-progress-bar>

Set the showProgressValue property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.showProgressValue = false;

Get the showProgressValue property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let showProgressValue = progressbar.showProgressValue;

themestring

Specifies the theme that controls the visual style and appearance of the element, including aspects such as colors, fonts, and overall design. Selecting a theme customizes how the element is displayed to users.

Default value

""

Example

Set the theme property. 

 <smart-progress-bar theme='blue'></smart-progress-bar>

Set the theme property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.theme = 'red';

Get the theme property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let theme = progressbar.theme;

unfocusableboolean

If set to true, this property prevents the element from receiving keyboard focus, making it unreachable via keyboard navigation such as the Tab key.

Default value

false

Example

Set the unfocusable property. 

 <smart-progress-bar unfocusable></smart-progress-bar>

Set the unfocusable property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.unfocusable = false;

Get the unfocusable property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let unfocusable = progressbar.unfocusable;

valuenumber

Retrieves the current value of the progress bar or sets it to a specified value, updating the visual representation accordingly. This value typically indicates the progress of a task as a numeric value within a defined range (e.g., 0 to 100).

Default value

0

Example

Set the value property. 

 <smart-progress-bar value='5'></smart-progress-bar>

Set the value property by using the HTML Element's instance. 

 const progressbar = document.querySelector('smart-progress-bar');
 progressbar.value = 45;

Get the value property. 

 const progressbar = document.querySelector('smart-progress-bar');
 let value = progressbar.value;

Events

changeCustomEvent

This event is triggered whenever the value of the associated input or component is modified by the user or via programmatic changes. It provides an opportunity to respond in real time to updates, such as validating input, updating the UI, or synchronizing data with other components.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event. 

const progressbar = document.querySelector('smart-progress-bar');
progressbar.addEventListener('change', function (event) {
	// event handling code goes here.
})

CSS Variables

--smart-progress-bar-default-widthvar()

Default value

"var(--smart-editor-width)"

smartProgressBar default width

--smart-progress-bar-default-heightvar()

Default value

"var(--smart-editor-height)"

smartProgressBar default height