Skip to content

React Native component visualizes the progress of a task using a circular indicator

Notifications You must be signed in to change notification settings

Ahmedhamed77/rn-circle-progress

Repository files navigation

rn-circle-progress

React Native component visualizes the progress of a task using a circular indicator

Features:

Dynamic Progress Indicator: The circle fills up based on the given progress percentage. Animated Percentage

Display: An animated text in the center updates to reflect the current progress percentage. Color Interpolation: The circle's stroke color changes dynamically based on progress, transitioning smoothly between different shades of green.

Reset Functionality: Allows the progress to be reset to zero with an animated transition. Sliced Circle Design: The circle is visually sliced into 10 segments, giving it a distinct appearance.

Usage:

Press the "Update Progress" button to increase the progress by 10% with each click. Once the progress reaches 100%, press the "Reset Progress" button to animate the progress back to 0%.

Screen.Recording.2023-08-15.at.16.57.38.mov

About

React Native component visualizes the progress of a task using a circular indicator

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published