# Counter Circle

- Link: https://www.solmesz.com/counter-circle
- Published: 2014-09-04T17:37:01-03:00
- Author: Sol Mesz

# Counter Circle Shortcode

Avada includes multiple animated counter shortcodes, including the counter circle
shortcode. 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 your needs. Wether its sales percentages, skill levels, promotional levels or
other data sets, the counter circle shortcode is a great way to visually attract
the viewer and display content.

94%

Users

Avada

**Control Colors**

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

Full

Control

of

Colors

**Control Size**

Each counter circle in the shortcode 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 shortcode can have the filled animation start full (up)
or empty (down).

Up

Down

**Animation Speed**

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

You

Can

Control

The

Circle

Speed

**Font Awesome Icons**

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

**Complete Set of Options **

Every option and description included with the counter circle shortcode is listed
below.

 * **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.
 * **id** – Add a _custom id_ to the wrapping HTML element for further css customization.

# Join The 100,000+ Satisfied Avada Users!

[ BUY AVADA NOW!](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)