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

Font Style

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;
}

Background

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;
}

Border

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;
}

Hover Style

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

Font Style

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;
}

Background

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;
}

Border

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;
}

Hover Style

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

Size

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;
}

Color

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;
}

Background

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;
}

Border





Hover Style

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;
}

Alignment

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

Animated Number 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;
}

Hover Style

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:

Solid Color

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



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

Image

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;
}

Gradient

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+ */
}

On mouse hover

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!

CSS for circle shape animated numbers



/*----------------------------------------
// 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