Easy Progress Bar
Progress Bar Module for Joomla
J4 J5 J6 Module M1.5
Current Version0.20K
Active UsersSee our product features
Three Modern Layouts
Choose the right presentation
Use a compact list, a polished card grid, or responsive radial circles for skills, milestones, analytics, and goals.
Flexible columns
Select one to four desktop columns with automatic tablet and mobile adaptation.
Four Ready-Made Themes
Light, Dark, Soft, and Brand
Start with a professionally balanced theme and tailor it to your website.
Practical design controls
Adjust track colour, accent colour, corner radius, item spacing, and individual bar height.
Solid, Gradient & Striped Bars
Style every metric
Choose solid fills, two-colour gradients, or striped bars with an optional moving pattern.
Individual colours
Give every progress item its own start and end colours for clear visual grouping.
Smooth Reveal Animation
Viewport or page-load reveal
Start animation as the module becomes visible or immediately when the page loads.
Fine control
Configure duration, stagger, easing, and animated value counters. Each reveal runs once and stops at the exact target.
Values That Fit Your Data
Custom values and suffixes
Use whole or decimal values from 0 to 100 and append %, points, /100, or another short suffix.
Three value positions
Place values beside the title, inside the fill, or after the track without squeezed text.
Repeatable Progress Items
Add and reorder with ease
Create multiple items from a repeatable Joomla field, then arrange them in the required order.
Useful supporting content
Every item can include a title, description, value, suffix, height, and colours.
Responsive by Default
No fixed-width layouts
Cards, lists, and radial metrics adapt automatically to the available module position.
Stable visual output
Bars preserve their configured values and labels across desktop, tablet, and phone widths.
Accessible Progress Indicators
Meaningful semantics
Progress elements expose accessible labels, minimum, maximum, and current values.
Motion preferences respected
Animation automatically stops for visitors who enable reduced motion.
Modern Joomla Architecture
Built for Joomla 4, 5, and 6
Version 1.5 uses namespaced services, a module dispatcher, helper classes, and Joomla's Web Asset Manager.
No legacy dependencies
The frontend uses one CSS file and one deferred vanilla JavaScript file—no jQuery or Waypoints.
Five Marketing-Ready Demos
See practical use cases
Explore Modern Cards, Project Milestones, Dark Analytics, Circular Goals, and Team Scorecards.
Copy proven combinations
Each demo highlights a distinct layout, theme, bar style, value position, or animation setup.
Choose the right presentation
Use a compact list, a polished card grid, or responsive radial circles for skills, milestones, analytics, and goals.
Flexible columns
Select one to four desktop columns with automatic tablet and mobile adaptation.
Light, Dark, Soft, and Brand
Start with a professionally balanced theme and tailor it to your website.
Practical design controls
Adjust track colour, accent colour, corner radius, item spacing, and individual bar height.
Style every metric
Choose solid fills, two-colour gradients, or striped bars with an optional moving pattern.
Individual colours
Give every progress item its own start and end colours for clear visual grouping.
Viewport or page-load reveal
Start animation as the module becomes visible or immediately when the page loads.
Fine control
Configure duration, stagger, easing, and animated value counters. Each reveal runs once and stops at the exact target.
Custom values and suffixes
Use whole or decimal values from 0 to 100 and append %, points, /100, or another short suffix.
Three value positions
Place values beside the title, inside the fill, or after the track without squeezed text.
Add and reorder with ease
Create multiple items from a repeatable Joomla field, then arrange them in the required order.
Useful supporting content
Every item can include a title, description, value, suffix, height, and colours.
No fixed-width layouts
Cards, lists, and radial metrics adapt automatically to the available module position.
Stable visual output
Bars preserve their configured values and labels across desktop, tablet, and phone widths.
Meaningful semantics
Progress elements expose accessible labels, minimum, maximum, and current values.
Motion preferences respected
Animation automatically stops for visitors who enable reduced motion.
Built for Joomla 4, 5, and 6
Version 1.5 uses namespaced services, a module dispatcher, helper classes, and Joomla's Web Asset Manager.
No legacy dependencies
The frontend uses one CSS file and one deferred vanilla JavaScript file—no jQuery or Waypoints.
See practical use cases
Explore Modern Cards, Project Milestones, Dark Analytics, Circular Goals, and Team Scorecards.
Copy proven combinations
Each demo highlights a distinct layout, theme, bar style, value position, or animation setup.
Need help getting started?
Our comprehensive documentation provides step-by-step instructions for setting up and installing Easy Progress Bar.
We have a pricing plan that's perfect for you!
Choose the subscription plan that suits you.
$9
$18
$49
Frequently Asked Questions
Easy Progress Bar supports Joomla 4, Joomla 5, and Joomla 6. It uses Joomla's namespaced services architecture and Web Asset Manager. PHP 8.0 or newer is recommended.
You can choose Compact List, Modern Cards, or Radial Circles. Card and radial layouts support one to four desktop columns and adapt automatically for tablets and phones.
Yes. Every item can have its own title, description, value, suffix, bar height, start colour, and gradient end colour. Items can also be added and reordered through the repeatable Content field.
Yes. The suffix is configurable for every item. You can use %, pts, /100, or another short label. Values may be whole numbers or decimals between 0 and 100.
For horizontal bars, place the value beside the title, inside the coloured fill, or after the track. You can also hide values completely. Radial layouts display the value inside the circle.
Animation can start when the module enters the viewport or when the page loads. You can configure duration, delay between items, easing, and count-up values. Each fill animation runs once and stops at its configured target.
The optional Move Stripe Pattern setting creates continuous movement for the Striped bar style. Disable that setting in the Animation tab when you want static stripes. Solid and gradient bars stop after their reveal animation.
Yes. Easy Progress Bar detects the browser's reduced-motion preference and displays the final values without animated movement. The content also remains visible at its configured values when JavaScript is unavailable.
No. Version 1.5 uses lightweight vanilla JavaScript, modern CSS, IntersectionObserver, and Joomla's Web Asset Manager. It has no jQuery or Waypoints dependency.
Yes. Every module instance receives a unique identifier and initializes independently, so you can use different layouts, themes, items, and animation settings on the same page.
The fill stops at the value configured for that item. For example, a value of 54 produces a 54% fill. Set the value to 100 when the bar should fill the entire track.
Clear the Joomla cache, template optimisation cache, CDN cache, and browser cache. Then open the module, review the new Content, Layout & Design, Animation, and Advanced tabs, and save it once.
Still have questions?
Related Extensions
Create Your Own Joomla Module for Free!
Use our Free Joomla Module Generator to quickly create custom modules for your website.