Content Comparison

A progress bar can be used to indicate the progress of an operation.

Steps to configure:

1. Goto component section

Image Removed

Image Added

2. Search and select the progress bar component in the component section

3. Drag and drop the progress bar component on the layout

Image Removed

Image Added

Configurations of a progress bar component

• Label: To display on UI

Image Removed

Image Added

• Progress bar size: The size of the progress bar to be displayed on UI like x-small, small, medium, large

• Variant: The progress bar comes in five variants:

  • Default

  • Inverse

  • Success

  • Warning

  • Error

• Value: Value to be bound to the progress bar

• Show percentage: To show the progress of an operation in percentage

• Show rounded: To make the progress bar corners rounded

• Show vertical: Shows progress bar vertically

• Value Destination Type: The user can bind a value to the progress bar component in two ways

  • Variable: The user can create a variable of type integer from the variable tab with a default value and can use such a variable as a value to the progress bar component

• Model: The user can create a model and use such model as a value to the progress bar component. the model captures value from an object that we select while the model creation