Progress Bar

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.

Attributes

Label

• The label is a short description given to the Progress Bar

• Generally, the label is displayed at the top left corner

Open

Progress bar size

• Progress Bars are available in four sizes i.e. x-small, small, medium & large

Open

Variant

• Variants display the Progress Bar with different colors to convey different meanings

• Progress bar comes in five variants:

1. Default: Shows Progress Bar in blue color

2. Inverse: Shows Progress Bar in gray color

3. Success: Shows Progress Bar in green color

4. Warning: Shows Progress Bar in yellow color

5. 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