Tassos Marinos Developer of Joomla Extensions

The Progress Bar Field

Updated 03 Jul, 2023

The Progress Bar custom field gives you the ability to display a progress bar just by filling a percentage. However, you can customize a variety of settings such as the height of the progress bar, the color of the bar, whether it will have stripes, if it will be animated or not, whether it will have rounded corners and shadows as well as choose the text alignment.

How to add a Progress Bar Custom Field to Joomla! Articles

The Progress Bar field provides you the above settings which makes it easy for you to fit it to your style.


Let's see what each option does.

Name Description
Name The name will be used to identify the field. Leave this blank and Joomla will fill in a default value from the title.
Label The label of the field to display.
Description A description of the field that will be displayed in the label tooltip.
Required Is this a mandatory field?
Height Set the height of the progress bar.
Color Set the background color of the progress bar.
Stripped Enable to display stripes on the progres bar.
Animated Enable to animate the stripes.
Rounded Corners Enable to make the progress bar corners rounded.
Shadow Enable to add an inner shadow to the progress bar.
Show Label Choose a position to display the percentage of the progress bar as text.


Once you are in your Article's Edit screen, choose the "Fields" Tab to see the Progress Bar custom field as you can see in the screenshot below.


In this textbox you can type in the percentage and the progress bar will be set.

Frontend Display

Take a look at the screenshot below to see how it could be displayed in your frontend.


Frequently Asked Questions

Can I animate the progress bar?

To animate the progress bar, you will need to enable the setting Animated. Once you enable this, you will notice that your Progress Bar is animated and has stripes. Stripes are used in order to get the animated effect.


Can I choose the text alignment?

In order to set where your text will appear, you will need to select an option from the setting Show Label. Available options are Disabled, Left, Center and Right.


Frequently Asked Questions

How can I override the layout of "ACF - Progress Bar" custom field?

To override the "ACF - Progress Bar" custom field, read here: How to override the "ACF - Progress Bar" custom field.