## Feature Examples ### Size - description:

Control progress bar size with size prop:

  • large is best for places where progress bar is the only element present.
  • medium is for common use cases.
  • small fits into smaller UI elements like cards and widgets.
  • tiny is used for dense layouts.
    • - example: ```jsx ; ``` ### Skin - description:

    Control the appearance with skin prop. It supports 3 styles:

  • standard is for common cases.
  • success is best for highligthing the positive effect of the process.
  • premium is to prompt users to upgrade their plans to premium subscription.
    • - example: ```jsx ; ``` ### Light - description:

    Invert the skin of a progress bar with the light prop. Use this skin on backgrounds with colors or images.

    - example: ```jsx ; ``` ### Progress indication - description:

    Add a label that indicates current progress in percentage with showProgressIndication prop.

    - example: ```jsx ; ``` ### Error status - description:

    Let users now if process failed using error property.

    Add text that explains what went wrong or what action the user should take with the errorMessage prop. Message will be revealed on hover over.

    - example: ```jsx ; ``` ### Label - description:

    Add custom label for the progress bar using label prop.

    - example: ```jsx ; ``` ### Label placement - description:

    Control custom label position using labelPlacement prop:

  • bottom (default)
  • center
    • - example: ```jsx ; ``` ## Common Use Case Examples ### Setup progress - description:

    Use circular progress bar to indicate users where they are in the feature or tool setup process.

    - example: ```jsx SEO setup checklist Fix current issues and follow recommendations to improve this site’s performance in search results. ; ```