charityroyale / webapplication

A charity page with CMS
MIT License
3 stars 1 forks source link

feat(tech): replace deprecated rc-progress #125

Closed chrsi closed 1 year ago

chrsi commented 1 year ago

A new progress bar component has been introduced that replaces the deprecated rc-progress component. Styling was mostly moved to the component, since it's cut for this concrete use case. Only a single prop is exposed to control the progress.

Fixes #105

chrsi commented 1 year ago

There's still some styling issue when the value is low (eg. 1%)

Screenshot 2023-07-06 at 21 47 27

tbc

p4dd9 commented 1 year ago

Nice-To-Have: You could add a transition animation for the width of the green/goldish bar so that when the amount is fetched clientside it has some animated loading

chrsi commented 1 year ago

Nice-To-Have: You could add a transition animation for the width of the green/goldish bar so that when the amount is fetched clientside it has some animated loading

Done :) A possible improvement would be to include the color change in the transition. So its yellow during the transition and green at the end.

p4dd9 commented 1 year ago

Regarding transition color change at the end of width animation --> transitionend eventlistener could be used, or making use of keyframe animation where the color changes at the end of the animation at 100% step