The Progress Bar Field

The "Progress Bar" custom field gives you the ability to display a progress bar just by filling a percentage.

Field Settings

The "Progress Bar" custom field provides you the way to set the percentage of the Progress Bar which will be displayed at your frontend.

acf-progress-bar-field-settings

As you can see from the screenshot above, after choosing the correct Type, you can set the height, background color, stripes, animation, rounded corners, shadow and progress bar label.

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.

Usage

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.

acf-progress-bar-usage

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.

acf-progress-bar-frontend