Animated Numbers

Overview and Settings

With Animated numbers Setting up a simple counter was never easier. It is useful to display quick and fun statistics of your company, and at the same time grab your users attention with a quick animated count of the numbers.

Examples of animated number elements.

Code Snippets

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

[av_animated_numbers number='100' icon_select='av-icon-before' icon='ue80a' font='entypo-fontello' font_size='' font_size_description='' link='' linktarget='no' color='' custom_color='#444444' custom_class='' admin_preview_bg='' av_uid='av-slqb2s']
Click here to add your own text
[/av_animated_numbers]

Customization

Before we start to customize the animated number element, please enable custom CSS class name support from Enfold theme options > Layout Builder and apply the required custom class name “my-custom-animated-numbers” to the animated numbers element for the code snippets to work well.

Animated Numbers

By default, the body font family is applied to the animated numbers. If you wish to change the font family or add custom styles to the animated numbers please use the below CSS.

NOTE: The font size and color can be changed from the element options but you can also add the CSS rules for color and font to the below CSS to specifically target the numbers.



/* Import external fonts ( Add the @import line to the top of your stylesheet) */
@import url('https://fonts.googleapis.com/css?family=Caveat+Brush|Gochi+Hand');



/* Animated numbers font style*/
#top .my-custom-animated-numbers-font.avia-animated-number .avia-single-number {
      font-family: 'Caveat Brush', cursive;
      color:#333;
}

To add a background color to the animated number please use the below CSS


/* Animated number background */
#top .my-custom-animated-numbers.avia-animated-number .avia-single-number {
      background: red;
}

To display a border only around the animated number, please use the below code:


#top .my-custom-animated-numbers.avia-animated-number .avia-single-number {
      border:2px solid red;
}

The below code will make changes to the animated number on hover


#top .my-custom-animated-numbers.avia-animated-number:hover .avia-single-number {
      color: red;
}

Description Text

To change the font style of the description text, please use the below CSS. You can change the font size and color from the element options or add your own CSS rules to the below selector.




#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-content p {
      background: red;
     font-family: 'Caveat Brush', cursive;
      color:#333;
}

The below code will add a background color to the description text.


#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-content p {
      background: red;
}

To a border style to the description text please use the below code


#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-content p {
      border: 2px solid red;
}

Use the below code to change the description text style on hover



#top .my-custom-animated-numbers.avia-animated-number:hover .avia-animated-number-content p {
      background: red;
}

Icon

Change the animated number icon size with the below code



#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-icon.av-icon-char:before {
      font-size: 60px;
}

The below code will change the animated number icon color



#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-icon.av-icon-char:before {
      font-size: 60px;
}

The below code will add a background color to the animated number icons.



#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-icon.av-icon-char:before {
      background: gold;
}





Please use the below code to add a hover effect to the icon



#top .my-custom-animated-numbers.avia-animated-number:hover .avia-animated-number-icon.av-icon-char:before {
      background: gold;
}

Icons in the animated number element can be aligned to the left or right of the title text. To make the icon appear on top or below the title text, simply disable the icon in the animated numbers option and place a separate icon element above or below the animated numbers as shown in the below screenshot.

Border

Add a border to the animated number element



#top .my-custom-animated-numbers.avia-animated-number {
      box-shadow: inset 0 0 0 4px red;
      padding: 30px;
}

Display a border around the animated number element on hover



#top .my-custom-animated-numbers.avia-animated-number {
	padding: 30px;
}
#top .my-custom-animated-numbers.avia-animated-number:hover {
      box-shadow: inset 0 0 0 4px red;
}



Background

Animated numbers take the parent containers width and background effects.  To add a background color, image or gradient place the animated numbers element inside a column or a grid and set its background. We can add the same background effect to the animated numbers using custom CSS.  Below are some examples:

The below code adds a solid background to the animated number element.



#top .my-custom-animated-numbers.avia-animated-number {
      background: gold;
      padding: 30px;
}

To add a background image please edit the background image path in the below code and add it to your site.



#top .my-custom-animated-numbers.avia-animated-number {
      background: url(BACKGRUOND IMAGE PATH);
      padding: 30px;
}

The below code adds a solid background to the animated number element.



#top .my-custom-animated-numbers.avia-animated-number {
  background: #12c2e9;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

Add a background effect on mouse hover using the below CSS



#top .my-custom-animated-numbers.avia-animated-number{
      padding: 30px;
}
#top .my-custom-animated-numbers.avia-animated-number:hover {
      background: gold;
}

Shapes

Circle border around the animated numbers can extend beyond the parent container and overlap to create a unique design. To do so please set the circle size more than 100% in the animated numbers options.

View examples of circle animated numbers.

Another approach to achieve a similar result is by applying custom CSS to the animated numbers as seen below:

NOTE: Please disable the built-in circle in the element options before using the CSS version of the circular animated numbers.

1000 %

Faster smoother uploads!



/*----------------------------------------
// Circle Animated number 
//--------------------------------------*/


.my-custom-animated-numbers.avia-animated-number {
    border: 2px solid #333;    
    display: flex;
    justify-content: center;
    align-self: center;
    width: 250px;
    height: 250px;
    border-radius: 250px;
    flex-direction: column;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Icon style */

.my-custom-animated-numbers .avia-animated-number-icon:before {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    margin-top: -60px;
    font-size: 28px;
}

/* Animated number description */

.my-custom-animated-numbers .avia-animated-number-content {	
    margin-top: 10px;
    width: 100%;
    padding: 0 30px;
}

Counter tricks

Adding a comma between the digits will start the counter for each comma-separated number unit. Check out the examples below.

This is a simple counter which starts from 0 and ends at 15000.

15000

Facebook

The counter counts 1 to 15 separately from the numbers on the right side of the comma.

15,000

Facebook

Animation Speed

Enfold version 4.5.7 and higher provides the option to delay the animation for a longer period and it can be changed from the Animated Number element option.

Resource

Contributed video:

Animated numbers