Circle Counter Widget

The animated circle counter is a great way to display a single statistic. With the animation turned on, the circle will gracefully fill up, till it reaches its preset value. Using three to four of these circles side by side, lets your visitors learn a lot about you a single glance.

DEMO


Admin Label : The name you add here will appear in the page builder under the widget name. This helps with easy identification of the contents of the widget.


Circle Settings

Title : This is used to give the circle a short description.

Title Position : The title can be placed above or below the circle.

Percentage : This defines the percentage of the circle that is to be highlighted.

Show Percentage ? : Uncheck to remove the percentage from the center of the circle.

Percentage Prefix : This can be used to insert any text before the percentage.

Percentage Suffix : This can be used to insert any text after the percentage.


Styling

Use circle animations? :  Uncheck this to disable the circles animations when the widget appears on screen.

Title Color : Set the title‚Äôs color.

Percentage Color : Set the percentage color.

Use percentage animations? :  Uncheck this to disable the number counter when the widget appears on screen.

Percentage Size : Set the percentage size.

Circle Color : Set the color for the highlighted section of the circle.

Circle Background Color : Set the color for the non-highlighted section of the circle.

Circle Shape : Choose the shape for the ends of the highlighted portion.

Circle Width : Set the thickness of the circle.

Circle Size : Set the height of the circle.