booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Radial Progress

Radial Progress

Preview Widget
Preview Widget
Getting Started
Radial Settings
Layout & Content
Radial & Text Styling

More Widgets

• Vertical Skill Bar
• Countdown
• Business Hours
• List Info Box

# Getting started

The radial progress widget from Booster Addons is a great way to display a percentage of some data on your web pages.Choose from multiple layouts, designs, animations, and customize everything to create your own style.

Lets go over the options provided in this widget.

Radial Settings

The radial settings section is where you will define the radial value and alternate the animation options.

  • Value Type & Value : Choose between decimal and percentage value types and define the value number that you want to use.
  • Enable Animation : Disable this to remove the animation feature if you want a more simple approach.
  • Animation Duration :  Change the animation duration.The higher this number, the slower the animation.
  •  : Alternate the animation starting point.The default value , which is 0, starts the animation at the top center of the circle.For example, if you use the value 0.5, it will start the animation at the bottom center of the circle.
  • Animation Type : Select an animation type from more than 20 available choices.
  • Animation Reverse : Enable this if you wan't to reverse the animation.

Layout & Content

Under the layout & content section, you will be able to align the radial and widget elements as well as defining the text and enabling the icon usage.  

  • Radial Align : Horizontally align the radial widget inside the containing section.
  • Suffix & Prefix : You can enable the use of a suffix and a prefix.The suffix text will appear on the right side of the value number and the prefix text will appear on the left side of the value number.
  • Suffix & Prefix Positions : You can use this to vertically align your suffix and prefix texts.
  • Icon : Enable the use of an icon and select one from our extensive icon librairies.
  • Layout Type : Choose a layout type for the icon.Enabling only the use of the icon is possible.


Under the styling tab section, you will have the full control over the styling & design of all your radial widget elements.You can change the sizes, colors, typography...

  • Radial Styling

Alternate the dial shape and size.

- : You can change the radial size and increase the width and thickness.

-Line Cap Type : Customize the shape for the tip of the radial circular line.The options available here are the square and round shapes.

  • Radial Colors

This is where you can customize the colors for the circular line.You can use an unlimited number for colors with the gradient feature.

-Radial Colors : Setup the list of colors that you want to use.These colors will be used as a color progression that will start from the first color of the list and end with the last one.

- : Change the gradient behavior by alternating the gradient angle.When using multiple colors, you can change the colors positions just by changing this value.

- : Change the radial empty space color.For example, if you are using 70 as the radial value, the definition of the empty space will be from 70 to 100.

-Circle Background Color : Customize the color for the circle background.This is the space behind and around the icon.

  • Typography & Colors

Customize the text properties for the value, suffix, and prefix .Choose a font style from a great number of font families and change the font size, letter spacing...

-: Customize the color of your text elements, with the possible use gradient color and control the gradient direction and colors positions.

  • Icon Styling

Customize and style your radial icon.

- : Change the icon size and control the icon position by changing the margins values.

-: Customize the icon color to create stylish radial designs.Both solid and gradient colors are available.

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket


We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.




Email :

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020