Overview
...
Progress Bar displays the progress of an operation, such as a file download or upload
Generally, Progress Bar displays horizontally from left to right
...
indicating the progress of an operation.
...
Configurations of a progress bar component
Label: To display on UI
...
Progress bar size: The size of the progress bar to be displayed on UI like
Attributes
Label
The label is a short description given to the Progress Bar
Generally, the label is displayed at the top left corner
...
Progress bar size
Progress Bars are available in four sizes i.e. x-small, small, medium , & large
...
Variant
...
Variants display the progress bar Progress Bar with different colors to convey different meanings, progress
Progress bar comes in five variants:
Default: Shows Progress Bar in blue color
Inverse: Shows Progress Bar in gray color
Success: Shows Progress Bar in green color
Warning: Shows Progress Bar in yellow color
Error
...
Value: Value to be bound to the progress bar
...
: Shows Progress Bar in red color
...
Value
The percentage value of the Progress Bar, value is an indication of progress
e.g. the Progress Bar denotes completion when the value is 100
Show Percentage
To indicate the progress of an operation in terms of percentage
...
Show
...
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
...
Rounded
It adds a border radius to the Progress Bar to give it a rounded look
...
Show Vertical
Displays a vertical Progress Bar from top to bottom to indicate the progress of an operation.
...
Value Destination Type
There are two types of Destination are available
Variable Destination: This type allows you to store the values in the variable, if you select Destination Type as variable then it will show you the variable that you have to store
Model: This type allows you to store the values in the Models, if you select Destination Type as model then it will show you the model that you have to store
| Include Page | ||||
|---|---|---|---|---|
|