Progress Bar

A percentage the eye reads before the words do

A bar or a ring that fills to the value you set, animated when it scrolls into view. Stock claimed, a target reached, a service level kept — the figure and the shape of it in one element.

See it live

Read the docs

Three linear bars at different values.

Urgency without a hard sell

"78% claimed" says the thing a countdown says, in a quieter voice and without a deadline you have to keep to. A bar that is nearly full moves a shopper along on its own.

The right value with or without the animation

The bar is stored already filled, and the ring's shape is written into the page itself. Nothing here depends on a script arriving before the shopper looks.

Three looks, one form

A linear bar, a striped bar or a ring — the same settings, the same content, chosen from a drop-down. Fields that do not apply to the shape you picked hide themselves.

Use cases

Where shops put it

Stock claimed on a promotion page

"84% of the launch allocation is gone." One bar under the product copy, updated by hand when the number is worth updating.

A campaign or funding target

A ring at 62% on a charity or crowdfunding page, with the amount as the label — a shape people read as progress without a legend.

Service levels on an About or Delivery page

Three bars: dispatched same day, delivered within 48 hours, orders without a complaint. Numbers a shopper checks before a first purchase.

What you control

Every field in the form, in plain words

Full option reference in the docs →

Value: From 0 to 100, decimals allowed and shown exactly as typed.
Label: And an optional numeric readout that counts up alongside the bar.
Animation: On or off, its duration, and the trigger — on scrolling into view, or as soon as the page loads.
Bar colour and track colour: Both stored with the page.
Bar height and corner radius: For the linear and striped shapes.
Moving stripes: On or off, for the striped shape.
Ring size: S, M or L — for the circular shape.
Appearance: Linear, Striped or Circular.

Shown in the demo store

Three linear bars filling as the page scrolls to them, the percentages counting up in step.

The striped bar, with and without the moving stripes.

The ring in its three sizes.

The readout and the animation both switched off.

Native and honest

Your content is written in Magento's own format

The finished state is what gets saved: the fill width for a bar, the geometry of the arc for a ring. The script animates up to a value that is already in your page.

Every element saves itself the way native Page Builder saves its own: a plain <div data-content-type="wrizu_…"> with its settings in data-* attributes, stored with the page. There is no proprietary database table, no shortcode, no second editor and nothing that has to be converted later.

That has a practical consequence. Disable the module and the storefront keeps serving those pages: headings, copy, images, links and buttons stay visible and clickable, and the styling you set per element — alignment, colours, spacing — stays with them, because it lives in a <style> block stored with the page rather than in our stylesheets. What you lose is what our CSS draws: the layouts, the borders and shadows, the button variants and the bundled icons.

One honest warning

With the module switched off, do not open and save a page that contains Wrizu elements — Page Builder flattens any page holding a content type it does not know into a single HTML Code block, and that save cannot be undone. It behaves that way with every unknown content type, not only with ours, and the storefront is unaffected either way; the rule is simply to leave those pages alone until the module is back on.

Works with any Luma-based theme

The elements are built on the same front-end stack the native Page Builder uses: jQuery and the libraries Page Builder already loads. They target Luma-based themes — Magento Blank, Luma, and the custom themes shops build on either of them.

Buttons use Luma's own button mixins, so a Wrizu button looks like a button from your theme rather than like a button from a plug-in. All of the module's CSS is scoped to [data-content-type^="wrizu_"], so it styles our elements and nothing else in your theme.

Requirements

Magento Open Source or Adobe Commerce 2.4.6 or newer, with the Magento_PageBuilder module enabled
PHP 8.1 to 8.5 — whichever your Magento version supports
No other extension, no external icon font, no CDN dependency

Questions about this element

What does a shopper see if the script never runs?

The bar, filled to its value, in its colours — because the width, the height, the radius and both colours are stored with the page. The ring is drawn from its own geometry, so it appears correctly filled as well.

Can I put the label underneath the bar?

Do the stripes have to move?

Is the readout always a percentage?

Media & motion