Easy Progress Bar 1.5 is a modern progress and metric module for Joomla 4, Joomla 5, and Joomla 6. Use it for skills, project milestones, fundraising goals, campaign analytics, completion status, team scorecards, product adoption, and more.

Version 1.5 combines polished presets with practical design and animation controls. It uses vanilla JavaScript and modern CSS, with no jQuery or Waypoints dependency.

Three responsive layouts

• Compact List: Efficient horizontal progress bars for narrow module positions and information-dense pages.
• Modern Cards: Present every metric in a polished card with one to four responsive columns.
• Radial Circles: Display goals and scores as clean circular indicators.

Cards and radial layouts automatically adjust for tablet and phone screens.

Themes and bar styles

Start with one of four complete themes:

• Light
• Dark
• Soft
• Brand

Horizontal layouts include three fill styles:

• Solid
• Two-colour Gradient
• Striped, with optional stripe movement

Adjust the track colour, accent colour, corner radius, spacing, and individual bar heights. Every progress item can use its own start and end colours.

Flexible progress content

Create and reorder multiple progress items through a repeatable Joomla field. Every item supports:

• Title
• Supporting description
• Value from 0 to 100
• Whole or decimal values
• Custom suffix such as %, pts, or /100
• Individual bar height
• Start and gradient end colours

Add an optional section heading and introduction above the metrics. Choose whether values appear beside the title, inside the fill, after the track, or not at all.

Controlled animation

Create a smooth reveal without distracting visitors:

• Trigger when visible in the viewport or on page load
• Set animation duration
• Stagger consecutive items
• Choose Ease Out, Ease In and Out, or Linear easing
• Animate numeric values from zero to their targets
• Optionally move the stripe pattern

Every fill animation runs once and stops at the configured value. Stripe movement is limited to the Striped style and can be disabled independently.

Responsive and accessible

• Responsive desktop, tablet, and mobile layouts
• Accessible progressbar semantics and value attributes
• Configurable semantic heading level
• Reduced-motion browser support
• Sharp, stable value labels during animation
• Final values remain visible without JavaScript
• Multiple module instances can run safely on one page

Colour communicates progress visually while the optional numeric value gives visitors an exact result.

Modern Joomla architecture

Easy Progress Bar 1.5 uses:

• Joomla services provider
• Namespaced module Dispatcher and Helper
• Joomla Web Asset Manager
• Vanilla JavaScript
• IntersectionObserver
• Modern CSS custom properties
• Sanitised custom CSS input

There is no jQuery, Waypoints, or third-party animation library to load.

Clear administrator interface

Settings are organised into four logical tabs:

1. Content
2. Layout & Design
3. Animation
4. Advanced

Conditional fields keep the interface focused by displaying options only when they apply to the selected layout or style.

Demo presets

• Modern Cards: Clean gradient metrics in a versatile card grid
• Project Milestones: Structured progress for phases and deliverables
• Dark Analytics: High-contrast striped bars for dashboards
• Circular Goals: Responsive radial indicators for targets
• Team Scorecards: Multi-column performance cards

Compatibility

• Joomla 4, Joomla 5, and Joomla 6
• PHP 8.0 or newer recommended
• Current Chrome, Firefox, Safari, and Edge releases
• Responsive desktop, tablet, and phone layouts

Quick start

1. Install mod_easy_pbar_1.5.zip through System > Install > Extensions.
2. Open Content > Site Modules > Easy Progress Bar.
3. Add a heading, introduction, and progress items.
4. Choose a layout, theme, and bar style.
5. Configure value placement and animation.
6. Select a template position and assign menu pages.
7. Publish and save the module.

Easy Progress Bar 1.5: make every milestone visible.