Goal Progress Bar
A customizable progress bar with goals, animated counts, and colored segments for each contribution source.
Made with Workshop
Build your own component with AI
The Segmented Progress Bar component makes it easy to visualize goals and contributions inside Framer projects. Define a target goal, set your current progress, and break it down into multiple categories — each with its own color on the bar.
On appear, the current value animates smoothly from 0 to your defined progress, giving a dynamic, engaging display. Perfect for portfolios, dashboards, fundraising trackers, or any project where you want to highlight growth and milestones.
Features
· Set a custom goal and current progress
· Auto-animated progress counter on load
· Add multiple categories (e.g., client work, templates, sales), each with its own color and value
· Configurable bar height, radius, and background color
· Fully editable typography and color controls for goal and current values
· Smooth responsive design, adapts to different layouts
