Loading...
Counter Circles2018-04-04T13:08:50+00:00

Counter Circle Element

Avada includes multiple animated counter elements, including the Counter Circle 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 its sales percentages, skill levels, promotional levels or other data sets, the Counter Circle Element is a great way to visually attract the viewer and display content.

96%
Users
Avada

Control Colors

Each counter circle in the element can have a different filled and unfilled color.

Choose
Any
Color
You
Want

Control Size

Each counter circle in the element can have a different circle diameter.

You
Can
Control
The
Circle
Size

Show Scales

Each counter circle can display a set of scales which visually mark the values around the circle. Larger scales mark it the quarter values around the circle.

Show
Some
Scales

Count Up or Down

Each counter circle in the element can have the filled animation start full (up) or empty (down).

Up
Down

Font Awesome Icons

Each counter circle can have text information or a font awesome icon inside the circle. The Font Awesome element can be used along with all of the icon options.

Animation Speed

Each counter circle in the element can have a different animation speed, which provides a visual variation.

You
Can
Control
The
Circle
Speed

Mobile Visibility Settings

Our mobile visibility system gives you full control over what displays based on 3 customizable screen sizes. Every Fusion Builder Element has these settings and they allow you to show or hide elements on various screen sizes. In addition, you can choose what those screen sizes are! This gives you maximum control to set the exact point when an element should show or hide. Resize the page to see the elements appear or disappear based on what we set.

Only Show on Desktop

Only Show on Tablet

Only Show on Mobile

Complete Set of Options

Every option and description included with the Counter Circle Element is listed below.

  • animation_offset – Can be one of these values: default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • filledcolor – Accepts a hexcode ( #000000 ). Sets the filled area’s color. Leave blank for Theme Option selection.
  • unfilledcolor – Accepts a hexcode ( #000000 ). Sets the unfilled area’s color. Leave blank for Theme Option selection.
  • size – Accepts a numerical value to set the overall diameter of the circle in pixels. For example, 220.
  • scales – Can be one of these values: yes, or no. This will show or hide a scale around the circle.
  • countdown – Can be one of these values: yes, or no. Sets the filling animation to move counter clockwise.
  • speed – Accepts a numerical value to set the time it takes for the animation to complete. For example, 1500.
  • value – The Filled Area Percentage. Accepts a numerical value to set the percentage of filled area. For example, 95.
  • class – Add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id – Add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.

Join The 450,000+ Satisfied Avada Users!

BUY AVADA NOW!

Sliding Bar Section For Widgets

This is the sliding section that can be enabled or disabled on any demo. You can insert anywhere from 1-6 columns along with any widget that comes with Avada, WordPress or additional 3rd party plugins. It's perfect for placing additional information on your site.

Recent Works

Contact Info

12345 North Street, New York City, NY 555555

Phone: 1-800-555-5555

Mobile: 1-234-567-8910

Fax: 1-234-879-5641

Web: http://yourwebsite.com