Overview
Using the Progress Bar you can display displays the progress of an operation, such as a file download or upload
Generally displays a horizontal , Progress Bar displays horizontally from left to right indicating the progress of an operation.
...
The label is a short description given to the Progress Bar
Generally, the label is displayed in the component 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
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: 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
...
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 | ||||
|---|---|---|---|---|
|