Repository navigation
[UI/UX] Implement Savings Group "Progress Ring" Animation for Dashboard #14
Description
🟡 Priority: High
Difficulty: Medium
Estimated Effort: 2-3 days
Relevant Files: src/components/dashboard/ProgressRing.tsx
Labels: enhancement, priority:high, ui, animations
Requirements
-
SVG Circle Progress
- Based on standard FinTech Figma designs, implement an interactive SVG progress ring that fills up based on the user's total savings vs. target savings.
- The ring must use
stroke-dasharrayandstroke-dashoffsetfor smooth CSS transitions. - Use the brand's Emerald Green (
#10B981) for the filled portion and a muted gray/transparent for the track.
-
Responsive Scaling
- Ensure the SVG scales perfectly within its container without losing stroke width proportions.
Activity
adetomiwa21 commentedon Aug 27, 2026
Hello maintainer, kindly assign me to this issue , i will commence work as soon as i am assigned
grantfox-oss commentedon Aug 30, 2026
🦊 GrantFox — @adetomiwa21 has been assigned to this issue as part of the Third Campaign campaign!
Next steps:
Closes #14)Good luck! Track your progress on GrantFox.
Merge pull request #24 from adetomiwa21/feature/progress-ring-14
grantfox-oss commentedon Aug 30, 2026
🎉 This issue has been marked as completed on GrantFox as part of the Third Campaign campaign!
@adetomiwa21's PR #24 was approved and merged by @Queenode.
🏆 @adetomiwa21: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (519 total points). Track your full progress on GrantFox.
👏 Great work, @adetomiwa21! Keep contributing to Kolo-Org.