Goal progress on any website.

Reading '8,700 of 12,000' takes a moment of mental arithmetic to turn into a sense of how far along something is. A bar filled roughly three-quarters of the way conveys the same thing instantly, before the visitor has read a single digit. That is the core value of a progress bar: it encodes a ratio as a length, and the human visual system reads length far faster than it parses numbers. It is why progress bars work for fundraising totals, skill levels, course completion, and project status alike. The Poper progress bar widget gives you that encoding without any code, and it shows the underlying number alongside the bar so the visitor gets both the quick read and the exact figure.

The Poper progress bar widget supports two bar types, and choosing the right one keeps the bar meaningful. A percentage bar is a simple 0 to 100 scale; use it when the natural unit is a percentage, such as a skill level or a completion rate. A fixed-value bar has a Current figure and a Goal, and the widget calculates the fill from the ratio; use it when the real-world number matters, such as 8,700 dollars raised of a 12,000 dollar goal, or 340 of 500 seats filled. The fixed-value mode keeps the actual figures in front of the visitor, which is important for a fundraiser or a sign-up drive where the number itself is part of the message. Each bar in a multi-bar widget can be set independently, so you can mix percentage and fixed-value bars in one block.

The widget ships eight layout templates, and the right one depends on the shape of your data. Simple Bar is a clean horizontal bar, the default for a single goal or a row of skills. Half Circle and Circular Ring render the progress as a gauge, which suits a dashboard-style summary; the Circular Ring lets you choose whether the center shows the percentage, the value, or nothing. Multi-Step renders a fixed sequence of stages, ideal for a process with discrete steps. Dotted breaks the bar into dots. Segmented breaks each bar into discrete blocks. Distribution shows a single total split into colored parts, good for a breakdown like a budget. Vertical List lays the bars out as a vertical, timeline-style sequence. Because switching templates reflows the same bars, you can try several and keep the one that reads best.

Beyond the fill itself, the Poper progress bar widget lets you add milestone markers to a bar. You enter the milestones as a comma-separated list of values, '25, 50, 75' for a percentage bar or '200, 500' for a fixed-value bar, and the widget places a marker at each point along the track. A single milestone label is shared across the markers. Milestones are useful when the journey toward the goal has meaningful checkpoints: stretch targets on a fundraiser, phase boundaries on a project, or grade thresholds on a course. You can toggle milestone display on or off, and they are available on the layouts where they make visual sense.

A progress bar should reflect a real number, and it should be easy to read. On the honesty side: set the Current value to the real figure and keep it updated, because a fundraising bar that never moves, or one pinned near full when the campaign is not, undercuts trust in the page. On the readability side: give each bar a clear label, pick a fill color with enough contrast against the track, and keep the bar count reasonable so the widget does not become a wall of bars. The animate-on-load entrance, with its configurable duration and easing, draws the eye to the bar as the page settles; keep the duration short enough that the final value is visible quickly. Preview the widget at a mobile width before embedding, since the widget adapts to small screens and you want to confirm the labels still read.