Counter Circles Element

Last Update: March 30, 2024

Avada includes multiple animated counter elements, including the Counter Circles Element. These are great for displaying varying types of data to your viewers. The Counter Circles have several options that allow you to easily customize them to fit your needs.

Whether it’s sales percentages, skill levels, promotional levels or other data sets, the Counter Circle Element is a great way to visually attract the viewer’s attention and display content. Read below to discover more about this useful little element, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Counter Circles Element

The Counter Circles Element allows you to add animated counter circles anywhere on your site. Just add the Element to your desired column.

There are both Parent Options, which affect the whole series of counter circles, and individual counter circle options. With this element, there is only one main Parent Option, and that is to control when the counter circles starts to animate. The default is when the top of the element hits the bottom of the viewport, but you can choose from two other options as well. Make sure to view the Element Demo page, to fully appreciate the options on offer. One thing to note is that if you want your counter circles to fill the width of the column they are in, make sure the number of columns equals the number of counter circles. If you have fewer, they won’t fill the column, and if you have more, they will display on a second row.

Once you have set your Parent Options, you add Child Items on the left. Click the pencil icon to edit the existing item. The Child Item Options Panel appears. This is where you add the content for the individual Counter Circles. These options allow you to style and populate the individual counter circles.

Once you have added content to one counter circle, you can then set up other counter circles, either by duplicating existing ones, or creating new ones, by clicking on the Clone Item icon, or the + Counter Circle button respectively.

Read below for a description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element in the Options > Avada Builder Elements > Counter Circles section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

Counter Circle Options

Filled Area PercentageFrom 1% to 100%.
Filled ColorControls the color of the filled in area.
Unfilled ColorControls the color of the unfilled in area.
Counter SizeInsert size of the counter in px. ex: 220.
Show ScalesChoose to show a scale around circles.
CountdownChoose to let the circle filling move counter clockwise.
Animation SpeedInsert animation speed in milliseconds.
Counter Circle TextInsert text for counter circle box, keep it short.

Counter Circles Options

Offset of AnimationControls when the animation should start.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.