[FEATURE REQUEST]: Circular Progress Component

[doodle-codes]

This is a variant request to the current Progress component in your UI toolkit. The Circular variant of the component would serve as a visual indicator to represent the progress of a task in a circular format, providing a more engaging and intuitive user experience for users on mobile or small-screen devices.

export default () => ( <Progress variant="circular"> <ProgressFilledTrack /> </Progress> )

export default () => ( <Progress variant="linear"> <ProgressFilledTrack /> </Progress> )

Key Features:

• Circular Visualization: The component should display progress with a circular variant format, allowing users to easily track the completion status of a task.

• Customizable Appearance: Users should have the ability to customize the appearance of the circular progress indicator, including the size, color, thickness, and style of the progress ring.

• Animation Support: The component should support animations for the web/native environment to provide smooth transitions between different progress states, enhancing the visual appeal.

• Accessibility: It's essential to ensure that the Circular Progress component is accessible to all users, including those with disabilities, by providing appropriate ARIA attributes and keyboard navigation support.

• Configurable Progress Value: Users should be able to specify the progress value dynamically, allowing the component to update its visual representation based on changes in the underlying data or user interactions.

• Integration with Other Components: The Circular Progress component should seamlessly integrate with other UI components and frameworks commonly used in our projects, such as React and React Native.

Use Case:
Imagine a scenario where we're developing a web application that includes various tasks or processes with different completion statuses. By incorporating the Circular Progress component into our interface, we can visually represent the progress of these tasks in an elegant and user-friendly manner, enhancing the overall usability and effectiveness of our application.

Overall, the addition of the Circular Progress component to our UI toolkit would significantly improve the visual appeal, usability, and accessibility of our applications, providing a more engaging experience for our users.

[appideasDOTcom]

I was looking for this exact functionality, hoping that I would find something similar to what I've used from Material UI in the past. Their "Circular determinate" and "Circular with label" components are in-line with your request - and what I would like/hope to see.

[appideasDOTcom]

react-native-circular-progress-indicator works, but it has a little bit of wonkiness in Expo.