Easy Progress Bar 1.5 is a modern Joomla site module for Joomla 4, 5, and 6. PHP 8.0 or newer is recommended.

1. Sign in to the Joomla administrator.
2. Open System > Install > Extensions.
3. Select Upload Package File.
4. Upload mod_easy_pbar_1.5.zip. Do not unzip the module package.
5. After installation, open Content > Site Modules.
6. Create or open an Easy Progress Bar module.
7. Choose a template position, assign the required menu pages, publish the module, and save it.

When updating an existing installation, install version 1.5 over the current module. Joomla retains existing module instances. Review and save each instance because version 1.5 introduces new layouts, themes, item fields, and animation controls.

The Content tab controls the section introduction and the repeatable progress items.

• Section heading: Optional heading displayed above all progress items.
• Introduction: Optional supporting text displayed below the heading.
• Progress items: Add, remove, duplicate, and reorder as many progress metrics as required.

Use short, descriptive labels such as Skills, Project Milestones, Campaign Performance, Fundraising Goals, Team Scores, or Completion Status. The module displays a configurable empty-state message when no items are available.

Open a row under Progress items to configure an individual bar or radial metric.

• Title: Required label for the metric.
• Description: Optional supporting text shown below the title.
• Value: A number from 0 to 100. Decimal values are supported.
• Suffix: Text placed after the value, for example %, pts, or /100.
• Bar height: Horizontal bar height from 6 to 64 pixels.
• Start colour: Solid bar colour or the first colour of a gradient.
• End colour: Second gradient colour.

Values are validated and limited to the supported range. For a solid bar, select the Solid style; for a two-colour fill, select Gradient under Layout & Design.

The Layout & Design tab provides ready-to-use visual combinations.

• Display layout: Choose Compact List, Modern Cards, or Radial Circles.
• Desktop columns: Select one to four columns for Cards and Radial layouts. Columns automatically adapt for tablets and phones.
• Theme: Choose Light, Dark, Soft, or Brand.
• Bar style: Choose Solid, Gradient, or Striped for horizontal layouts.
• Value position: Display the value beside the title, inside the bar, or after the bar.
• Show value: Hide or display the numeric value.
• Track colour: Set the unfilled background colour.
• Accent colour: Set the shared interface accent used by the selected design.
• Corner radius: Adjust rounding from square corners to pill-shaped bars and cards.
• Item gap: Control the spacing between progress items.

Inside values remain sharp during animation because the fill animates by width rather than scaling its text. Radial layouts use responsive SVG circles and do not require a bar-style setting.

The Animation tab controls how progress is revealed.

• Animate progress: Enable or disable all reveal animation.
• Animation trigger: Start when the module enters the viewport or immediately when the page loads.
• Duration: Set the fill duration from 100 to 5000 milliseconds.
• Stagger: Add a delay between consecutive items.
• Easing: Choose Ease Out, Ease In and Out, or Linear.
• Animate value counter: Count the displayed number from zero to its final value.
• Move stripe pattern: Keep the stripe texture moving after reveal. This option only affects the Striped bar style.

Each item animates once. Solid and gradient bars stop completely at their configured values. Disable Move stripe pattern when a static striped result is preferred.

The Advanced tab contains semantic and integration controls.

• Heading HTML tag: Select H2, H3, or H4 to preserve the page heading hierarchy.
• Show empty message: Decide whether visitors see a message when no progress items are configured.
• Empty message: Customize the text shown for an empty module.
• Module class suffix: Add a custom class for template-level styling.
• Custom CSS: Add module-specific CSS overrides. Unsafe script-like CSS patterns are rejected.
• Alternative layout: Select a Joomla template override when one is available.

Version 1.5 uses Joomla's Web Asset Manager, namespaced services architecture, vanilla JavaScript, and modern CSS. It does not require jQuery, Waypoints, or another animation library.

Easy Progress Bar is designed for responsive and accessible websites.

• Card and radial columns collapse automatically on smaller screens.
• Progress elements expose the correct progressbar role, accessible label, minimum, maximum, and current value.
• Visible values use tabular numerals for stable count-up animation.
• Animations respect the visitor's prefers-reduced-motion setting.
• Without JavaScript, bars and radial circles remain visible at their configured final values.
• Multiple module instances can safely appear on the same page.

Choose sufficient contrast between the track, fill, text, and page background. A visible number should supplement colour when the exact value matters.

• The module does not appear: Confirm that it is published, assigned to the current menu item, and placed in a position rendered by the active template.
• No progress items appear: Add at least one item in the Content tab, or enable and customize the empty message.
• The animation does not run: Confirm that Animate Progress is enabled. Viewport-triggered animation starts only when the module becomes visible. Reduced-motion browser settings intentionally disable motion.
• A striped bar keeps moving: This is the optional Move Stripe Pattern effect. Disable it in the Animation tab for static stripes.
• A value stops below 100%: The bar stops at its configured value; for example, 54 displays a 54% fill.
• Old styling remains after an update: Clear the Joomla cache, template optimisation cache, CDN cache, and browser cache.
• Custom CSS does not apply: Check the selector and syntax. Unsafe CSS containing script-like or remote-import patterns is intentionally discarded.