Description

Feature Request: Add variant and status-position props to UProgress component

Description

I’m a junior developer, and I’ve been working on enhancing the flexibility of the Progress component by adding two new props: variant and status-position. These props allow for better customization, especially when using the Progress component in different design contexts.

• variant: This prop allows you to choose between two styles for the progress bar: linear and circular. The circular variant provides a circular progress bar instead of the default linear style.

• status-position: This prop controls the position of the progress status (the percentage or label) relative to the progress bar. The possible values are:

  • inside: The status is displayed inside the circle (for the circular variant).
  • outside: The status is displayed outside the circle.

Motivation

This update would help in using the Progress component more flexibly across different layouts, providing options for both linear and circular progress indicators with customizable label placements.

What I've Done

I’m still a junior developer, so the implementation is not perfect, but a good portion of the work is done. I’ve added the variant and status-position props to the Progress component. I’d love to know if this is something you’d like to integrate into the main repository and whether I can open a pull request for it.

Additional Notes

• The variant prop accepts values linear or circular.
• The status-position prop accepts values inside or outside.

Would love to hear your thoughts on this approach!

Additional context

Reka UI : Progress Circular