WEB ELEMENT

COUNTER CIRCLE

We include 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.

The Counter Circle Shortcode Is Highly Customizable

Customization options for circle size, filled and unfilled color, scales, speed, counting direction and more!

95 %
Users
Madrid
Visual

Control Colors

Each counter box can have a different color for the text and icon.
Full
Control
of
Colors

Column Options

Each counter box instance has an option for selecting column width.
You
Can
Control
The
Circle
Size

Unit Control

Each counter box instance can have a different unit and unit position.
Show
Some
Scales

Count Up or Down

Each counter box can have the animation number start up or down
Up
¡
Down
!

Font Awesome Icons

Each counter box instance can display a font awesome icon with the content.
You
Can
Control
The
Circle
Speed

Border Control

Each counter box instance can display a border around the box.

Font
Awe
Icons

Total Control Over Meta Data Display

With each blog shortcode comes a full set of options for meta data. These options allow you to enable or disable each different section of meta data, or the entire set together.

  • Offset of Animation  = Choose when the animation should start.
  • CSS Class = Add a class to the wrapping HTML element.
  • CSS ID  = Add an ID to the wrapping HTML element.
  • Filled Area Percentage = From 1% to 100%
  • Filled Color = Controls the color of the filled in area. Leave blank for theme option selection.
  • Unfilled Color = Controls the color of the unfilled in area. Leave blank for theme option selection.
  • Size of the Counter = Insert size of the counter in px. ex: 220.
  • Show Scales = Choose to show a scale around circles.
  • Countdown = Choose to let the circle filling move counter clockwise.
  • Animation Speed = Insert animation speed in milliseconds
  • Counter Circle Text = Insert text for counter circle box, keep it short