Overview
Using the Progress Bar you can display 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.
Attributes
Label
The label is a short description given to the progress barProgress Bar
Generally, the label is displayed in the component at the top left corner
...
Progress bar size
...
Progress bars 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: Shows
...
Progress Bar in red color
...
Value
...
The percentage value of the progress barProgress Bar, value is an indication of progress, eg
e.g. the Progress Bar denotes completion when the value is 100
Show
...
Percentage
To indicates indicate the progress of an operation in terms of percentage
...
Show
...
Rounded
It adds a border radius to the progress bar Progress Bar to give it a rounded look
...
Show
...
Vertical
Displays a vertical progress bar Progress Bar from top to bottom to indicate the progress of an operation.
...
Value Destination Type
...
Variable: The user can create a variable of type integer from the variable tab and can use such a variable as a value to the progress bar component, from the value destination variable, the user can choose the variable in which he/she wants to save the value of field // discard
...
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. from the value destination model, the user can choose the specific model in which he/she wants to save the value of the field
...
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 | ||||
|---|---|---|---|---|
|