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
- Field Settings
- Field Usage
- Field Frontend Display
- Can I animate the progress bar?
- Can I choose the text alignment?
- Frequently Asked Questions
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. |
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.
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.
