...
Overview
Progress Bar displays the progress of an operation
...
How to use a button on the layout designer page:
Steps:
Goto component section
...
2. Search and select the progress bar component in the component section
3. Drag and drop the progress bar component on the layout
...
Configurations of a progress bar component
1. Label: To display on UI
...
, such as a file download or upload
Generally, Progress Bar displays horizontally from left to right indicating the progress of an operation.
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 with different colors to convey different meanings
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
...
4. 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
...
6. Show rounded: shows progress bar round shaped
...
...
Show 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 | ||||
|---|---|---|---|---|
|