Elementor Widget

Comparison BarsShow the difference, visually.

Animated horizontal bars that make comparisons immediately clear. Perfect for before/after, cost savings, or performance benchmarks.

When to use Comparison Bars

Use Comparison Bars when the gap between two numbers tells the story. Cost savings, token reduction, time saved, speed improvement — any before/after metric where a visual bar makes the difference land harder than a sentence.

Live example

Comparison Bars — token savings with skills

Without

1200

With

120

Each bar compares the token cost of pasting a prompt manually versus invoking a skill. Skills load the same instructions in ~60 tokens regardless of how long the original prompt was.

What you can control

Setting	What it does
bar_label	The metric name shown to the left of each bar pair
before_value / after_value	Percentage values (0–100) for the two bars. The bar lengths are proportional to these
before_label / after_label	Text labels shown beside each bar to explain the values
before_color / after_color	Colours for each bar — typically muted for before, accent for after
bar_height / bar_radius	Physical size and corner rounding of the bars

← Data Table Next: Stat Strip →

Comparison BarsShow the difference at a glance.

Animated horizontal bars that make comparisons visual. Before/after results, benchmark scores, plan breakdowns — instantly scannable.

What it does

Animated bars that tell the story

Each row shows a label, an animated bar, and a value. Bars fill in on scroll or page load. You set the value and the maximum, and the bar fills proportionally. An optional target line lets you show a baseline or benchmark alongside the result.

Best used for: before/after results, token savings comparisons, benchmark scores, coverage percentages, and any data where visual proportion matters more than exact numbers.

Live example

Token cost: with vs without skills

Lower is better. Skills reduce the token cost of repeating context across sessions.

With skills (per session)

Without skills (per session)

95%

Key settings

What you can control

Setting	What it does
Label / value / max	Each row has a label, a value, and a max. The bar fills to value/max.
Show percentage	Display the value as a % of max instead of the raw number.
Bar colour per row	Each row can have its own bar colour for visual distinction.
Target line	Add a vertical line on a bar at a specific value to show a baseline or benchmark.
Label position	Labels can sit to the left of the bar or above it — above gives the bar full width on mobile.

← Data Table Next: Stat Strip →