Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview: The progress bar helps to indicate displays the progress of an operation from left to right, such as for a file download or upload.

Configurations of a progress bar component

...

  • 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: Shows progress bar in red color

...

  • Value: A user needs to enter a value into the value input box to bind it with The percentage value of the progress bar, value is an indication of progress, eg. 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: 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 and can use such a variable as a value to the progress bar component

...