How To Use The Advanced Progress Bar Widget By Atomic Addons

The Advanced Progress Bar widget by Atomic Addons shows a list of horizontal bars, each with a name and a value, that fill up when a visitor scrolls to them. It is made for skill lists, survey results and project progress. This guide covers adding the widget, building the bars and choosing how they look.

Enable the Advanced Progress Bar Widget

Advanced Progress Bar is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Advanced Progress Bar. You can also open the Content category.

4. 4

   Turn the Advanced Progress Bar widget on.

5. 5

   Click Save Settings.

Add the Advanced Progress Bar Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Advanced Progress Bar. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Progress Bars

Open the widget and go to Content → Progress Bars. The list starts with five bars: Design, UX, Coding, Speed and Passion. Click a bar to edit it, or click Add Item for a new one. Each bar has:

1. 1

   Name: The label of the bar, such as a skill. It accepts dynamic tags.

2. 2

   Max Value: The value of a full bar, 100 by default.

3. 3

   Level (Out Of Max Value): The bar's value, 95 for a new bar. The bar fills to the level divided by the max value: a level of 30 with a max value of 50 fills 60% of the bar.

4. 4

   Text Color: The color of this bar's name and value.

5. 5

   Base Color: The color of this bar's empty track.

6. 6

   Fill Color: The color of this bar's filled part.

Below the list, the settings apply to every bar:

1. 1

   Animation Speed (s): How long a bar takes to fill, from 0.1 to 10 seconds.

2. 2

   Animation Delay (s): Fills the bars one after another: each bar waits this many seconds longer than the one above it.

3. 3

   Progress Style: Where the name and value go. Default puts them above or below the bar. Percentage With Progress puts the name above or below and the value in a bubble at the end of the fill. Inner Content shows only the value, inside the fill at its end. Inner Content Between shows the name at the start of the fill and the value at its end.

4. 4

   Text Position: With the Default or Percentage With Progress style: Text Outside Top (the default) or Text Outside Bottom.

5. 5

   Additional Style: Default (a plain fill), Striped, Striped With Animation (the stripes move) or Rainbow Animation (the fill cycles through a gradient of colors).

6. 6

   Rainbow Animation Speed (s): With Rainbow Animation: how long one color cycle takes, 1 to 50 seconds.

7. 7

   Show Percentage: Adds a % sign after each value. On by default.

8. 8

   Show Max Value: Shows the value as level / max value, such as “30 / 50”.

Each bar fills once, when it scrolls into view. Screen readers announce every bar as a progress bar with its name and value.

Style the Advanced Progress Bar

Everything below is on the Style tab:

• Progress Bars — the bars' Height, the Spacing Between them, separate border radius for the track and the fill, the padding of inner content and a shadow.
• Content — the text color, the track's Base Color, the fill's background (a color or a gradient), the Rainbow Color list for the rainbow animation, typography and text shadow. Colors set on a single bar override these.
• Percentage — with the Percentage With Progress style: the value bubble's color, background, size, position, typography, radius and padding.