Animated Number

What’s this?

The Animated number shortcode allows you to count up or down from one number to another. A great way to display numbers. Check out the examples below.

Inside Columns 1

0
Shortcodes
0
Color Schemes
0
Case Studies
0
Color Palettes
0
Page Layouts

Get code

[row padding="0" gaps="1" convert="units-mobile-50 phone-width-100"]
[col width="20"]
[icon icon="icon-genius" font_size="30" color="style-inherit" animation="fadeInLeft" animation_offset="50" margin_top="20px" margin_right="15px"]
[animated_number end_number="22" font_size="60" margin_bottom="0" margin_left="5"] 0 [/animated_number]
[fancy_header tag="h5" size="small" text_align="textcenter" letter_spacing="2" unit="px" uppercase="1"]Shortcodes[/fancy_header]
[section_break type="blank" margin_bottom="20" hide="hide-desktop" /]
[/col]
[col width="20"]
[icon icon="icon-paintbrush" font_size="30" color="style-inherit" animation="fadeInLeft" animation_offset="50" margin_top="20px" margin_right="15px"]
[animated_number end_number="22" font_size="60" margin_bottom="0" margin_left="5"] 0 [/animated_number]
[fancy_header tag="h5" size="small" text_align="textcenter" letter_spacing="2" unit="px" uppercase="1"]Color Schemes[/fancy_header]
[section_break type="blank" margin_bottom="20" hide="hide-desktop" /]
[/col]
[col width="20"]
[icon icon="icon-desktop" font_size="30" color="style-inherit" animation="fadeInLeft" animation_offset="50" margin_top="20px" margin_right="15px"]
[animated_number end_number="5" font_size="60" margin_bottom="0" margin_left="5"] 0 [/animated_number]
[fancy_header tag="h5" size="small" text_align="textcenter" letter_spacing="2" unit="px" uppercase="1"]Case Studies[/fancy_header]
[section_break type="blank" margin_bottom="20" hide="hide-desktop" /]
[/col]
[col width="20"]
[icon icon="icon-paintbrush" font_size="30" color="style-inherit" animation="fadeInLeft" animation_offset="50" margin_top="20px" margin_right="15px"]
[animated_number end_number="45" font_size="60" margin_bottom="0" margin_left="5"] 0 [/animated_number]
[fancy_header tag="h5" size="small" text_align="textcenter" letter_spacing="2" unit="px" uppercase="1"]Color Palettes[/fancy_header]
[section_break type="blank" margin_bottom="20" hide="hide-desktop" /]
[/col]
[col width="20"]
[icon icon="icon-document" font_size="30" color="style-inherit" animation="fadeInLeft" animation_offset="50" margin_top="20px" margin_right="15px"]
[animated_number end_number="20" font_size="60" margin_bottom="0" margin_left="5"] 0 [/animated_number]
[fancy_header tag="h5" size="small" text_align="textcenter" letter_spacing="2" unit="px" uppercase="1"]Page Layouts[/fancy_header]
[/col]
[/row]

Inside columns 2

Shortcodes


0

Color Schemes


0

Case Studies


0

Color Palettes


0

Page layouts


0

Get code

[row padding="0" gaps="1" convert="units-mobile-50 phone-width-100"]
[col width="20"]
[icon icon="icon-genius" font_size="35" color="style-inherit" animation="bounceIn" position="center" margin_bottom="10px"]
[animated_number end_number="22" label="Shortcodes" tag="h4" font_size="67" text_align="textcenter" animated="1"]0 [/animated_number]
[section_break type="blank" margin_bottom="20" hide="hide-desktop" /]
[/col]
[col width="20"]
[icon icon="icon-paintbrush" font_size="35" color="style-inherit" animation="bounceIn" position="center" margin_bottom="10px"]
[animated_number end_number="22" label="Color Schemes" tag="h4" font_size="67" text_align="textcenter" animated="1"] 0 [/animated_number]
[section_break type="blank" margin_bottom="20" hide="hide-desktop" /]
[/col]
[col width="20"]
[icon icon="icon-desktop" font_size="35" color="style-inherit" animation="bounceIn" position="center" margin_bottom="10px"]
[animated_number end_number="5" label="Case Studies" tag="h4" font_size="67" text_align="textcenter" animated="1"] 0 [/animated_number]
[section_break type="blank" margin_bottom="20" hide="hide-desktop" /]
[/col]
[col width="20"]
[icon icon="icon-paintbrush" font_size="35" color="style-inherit" animation="bounceIn" position="center" margin_bottom="10px"]
[animated_number end_number="45" label="Color Palettes" tag="h4" font_size="67" text_align="textcenter" animated="1"] 0 [/animated_number]
[section_break type="blank" margin_bottom="20" hide="hide-desktop" /]
[/col]
[col width="20"]
[icon icon="icon-document" font_size="35" color="style-inherit" animation="bounceIn" position="center" margin_bottom="10px"]
[animated_number end_number="20" label="Page layouts" tag="h4" font_size="67" text_align="textcenter" animated="1"] 0 [/animated_number]
[/col]
[/row]

In content examples

On the left

0 Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit.

Get code

[animated_number end_number="100" font_size="50" text_align="textleft" bold="1"] [/animated_number]

In the center

0 Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit.

Get code

[animated_number end_number="101" font_size="50" text_align="textcenter" bold="1"] [/animated_number]

On the right

0 Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit.

Get code

[animated_number end_number="102" font_size="50" text_align="textright" bold="1"] [/animated_number]
X

Variations

Change the Skin for this Case Study

Case Studies

Design demos for React