Goal Progress Bar

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