How To Use The Progress Pie Widget By Atomic Addons

The Progress Pie widget by Atomic Addons shows a value from 0 to 100 as a ring that fills up when it scrolls into view. The middle shows the counting percentage or your own text, and a title sits under the ring. Use it for skills, goals or statistics. This guide covers adding the widget and setting it up.

Enable the Progress Pie Widget

Progress Pie 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 Progress Pie. You can also open the Content category.

4. 4

   Turn the Progress Pie widget on.

5. 5

   Click Save Settings.

Add the Progress Pie Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Progress Pie. 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).

Layout

Open the widget and go to Content → Layout:

1. 1

   Progress Value: How full the ring gets, from 0 to 100. 75 by default. You can fill it from a dynamic tag.

2. 2

   Duration(s): Roughly how long the ring takes to fill, in seconds. 1 by default.

3. 3

   Progress Pie Title: The title under the ring, “Progress Pie Title” by default. Leave it empty for no title.

4. 4

   Hide Title Divider: Removes the thin line between the ring and the title. Shown while there is a title.

5. 5

   Before Text: A small line above the number in the middle of the ring.

6. 6

   Middle Text: Text that takes the place of the counting percentage in the middle of the ring, such as “Done”. Leave it empty to show the percentage.

7. 7

   After Text: A small line under the number in the middle of the ring.

The ring starts filling once most of the widget is on screen, so a visitor who scrolls down sees it count up. The title is a level-four heading (h4).

Style the Progress Pie

All of the widget's look is on the Style tab, in the Style section:

• Progress Pie — Pie Fill Color for the empty track, Pie Bar Color for the filled part, the color and typography of the before, middle and after text and of the percentage, the ring's Padding, and Pie Size (200px by default, up to 600px or a percentage).
• Line Width — the thickness of the ring, 8 by default.
• Line Cap — the shape of the bar's ends: Rounded (the default), Square or Butt (flat).
• Title — the title's background, color, padding and typography. A background color also removes the divider line.