BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Free widget

Progress Bar Widget for Elementor Free

A line or circle progress indicator with a percentage.

Overview

What Progress Bar does

Progress Bar shows a percentage as a horizontal line or as a circle, with a title and the number. The fill animates from zero when the widget scrolls into view. Use it for skills, goals, funding targets or any value out of 100.

Live demo

See it in action

Web Design 85%
Features

What it can do

  • Two types: Line and Circle.

  • Percentage from 0 to 100 set with a slider.

  • Optional percentage text that counts up with the fill.

  • Striped fill with moving stripes for the line type.

  • Solid fill or a two color gradient for the line type.

  • Animation duration up to 10000 milliseconds, or 0 for no animation.

  • Circle size and line width controls for the circle type.

  • Marked up as a progress bar for screen readers, with the title as its label.

Use cases

When to use it

Skill lists

Stack several line bars to show skill levels on an about or resume page.

Fundraising goals

Show how much of a target has been reached.

Stat circles

Place circle types in columns for a row of round percentage stats.

Project status

Show how far a project or order has progressed.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag Progress Bar from the Bright Addons category onto the page.

  2. Choose the Type: Line or Circle.

  3. Type the Title and set the Percentage.

  4. Switch Show Percentage on or off, and for a line switch on Striped if wanted.

  5. Set the Animation Duration (ms).

  6. Open the Style tab and set Fill Color, Track Color and the bar height or circle size.

FAQ

Questions and answers

Can I make a circular progress bar?

Yes. Set Type to Circle. Circle Size and Line Width in the Style tab control its look.

Can the bar use a gradient?

The Line type can. Set Fill Color and Fill Gradient End in the Style tab.

How do I turn off the animation?

Set Animation Duration (ms) to 0 and the bar shows at its final value right away.

Can I show several bars in one widget?

No. Each widget shows one bar. Add one widget per value.

Free forever

Progress Bar is free

It is one of 48 widgets in the free Bright Addons plugin. Each widget loads its code only on pages that use it.