[UProgress]: Add `variant` and `status-position` props

[Achraf931]

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

[benjamincanac]

@HugoRCD We could introduce a new circular variant based on:

• https://reka-ui.com/examples/progress-circular
• (https://examples.motion.dev/vue/radix-progress)

[HugoRCD]

@Achraf931 I know you'd started trying to integrate the progress circular where exactly were you already?

[Achraf931]

Hello @HugoRCD, i created the PR in draft, I've tried to do things right, there's probably room for improvement but I hope that what I've already been able to do can help as much as possible.

[github-actions]

Hi! 👋

This issue has been automatically closed due to prolonged inactivity.

We're a small team and can't address every report, but we appreciate your feedback and contributions.

If this issue is still relevant with the latest version of Nuxt UI, please feel free to reopen or create a new issue with updated details.

Thank you for your understanding and support!

— Nuxt UI Team