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.
The radial settings section is where you will define the radial value and alternate the animation options.
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.
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...
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.
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.
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.
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.
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.