Skip to main content Skip to page footer

Progress

The Progress element is a simple yet powerful way to visualize completion, skills, or any value at a glance. Whether you're showing project status, skill levels, campaign goals, or download progress, a clean progress bar communicates instantly — often faster than any number or sentence could.

Fully customizable right in the backend, you can set the value, choose colors to match your brand, add smooth gradients, and adjust the height and style of each bar. Pair it with a label and percentage so visitors always know exactly what they're looking at.

Within the Yavi Theme, progress bars are responsive, cleanly styled, and can be brought to life with subtle animations as they scroll into view — combining clarity with the polished quality the Bootstrap Package is known for.

Progress Layout 1 — Minimal Bar

A clean, slim progress bar with a smooth color gradient and the percentage value placed neatly beside the label. Understated and elegant, it fits perfectly into any section where you want to show values without drawing too much attention.

Faster Development

 0%

Peak Performance

 0%

Client Satisfaction

 0%

Progress Layout 2 — Value Badge

This layout highlights each value with a bold badge that sits right on the bar, marking the exact point of progress. Ideal when the numbers themselves are the star — great for skills, KPIs, or key results you want visitors to notice instantly.

Faster Development
0%

Peak Performance
0%

Client Satisfaction
0%

Progress Layout 3 — Striped & Animated

A vibrant, striped progress bar that fills with lively motion as it scrolls into view. The animated stripes add energy and draw the eye, making it the perfect choice for dynamic pages that should feel active and engaging.

Faster Development
0%

Peak Performance
0%

Client Satisfaction
0%