Animated Number

ShortcodesAnimated 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]

Variations

Change the Skin for this Case Study

Demos

React Hub
Lens
Berri
Replika
Press
Second
View all Demos React Hub Copy current page content
[box type="custom-boxed-item" align="center" text_align="textcenter"] [fancy_header tag="h4" size="medium" text_align="textcenter" bold="1"]What's this?[/fancy_header] 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. [icon icon="fa-arrow-down" font_size="15" boxed="1" description="See examples below" position="center" margin_top="20px" margin_bottom="-40px" link="#content" class="infinite wobble"] [/box] [section_break type="blank" margin_bottom="30" /] [fancy_header type="style1" size="inherit-size" text_align="textcenter" bold="1" margin_top="80" margin_bottom="40"]Inside Columns 1[/fancy_header] [block text_align="textcenter" margin_bottom="40"] [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] [/block] [accordion style="plain"] [accordion_toggle title="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]
[/accordion_toggle] [/accordion] [fancy_header type="style1" size="inherit-size" text_align="textcenter" bold="1" margin_top="80" margin_bottom="40"]Inside columns 2[/fancy_header] [block text_align="textcenter" margin_bottom="40"] [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] [/block] [accordion style="plain"] [accordion_toggle title="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]
[/accordion_toggle] [/accordion] [fancy_header type="style1" size="inherit-size" text_align="textcenter" bold="1" margin_top="80" margin_bottom="40"]In content examples[/fancy_header] [row] [col width="33"] [fancy_header size="small"]On the left[/fancy_header] [p] [animated_number end_number="100" font_size="50" text_align="textleft" bold="1" margin_top="20"]0[/animated_number] 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. [/p] [section_break type="blank" margin_top="15" margin_bottom="20"] [accordion style="plain"] [accordion_toggle title="Get code"]
[animated_number end_number="100" font_size="50" text_align="textleft" bold="1"] [/animated_number]
[/accordion_toggle] [/accordion] [/col] [col width="33"] [fancy_header size="small" text_align="textcenter"]In the center[/fancy_header] [p] [animated_number end_number="101" tag="div" font_size="50" text_align="textcenter" bold="1" animated="1"]0[/animated_number] 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. [/p] [section_break type="blank" margin_top="15" margin_bottom="20"] [accordion style="plain"] [accordion_toggle title="Get code"]
[animated_number end_number="101" font_size="50" text_align="textcenter" bold="1"] [/animated_number]
[/accordion_toggle] [/accordion] [/col] [col width="33"] [fancy_header size="small" text_align="textright"]On the right[/fancy_header] [p] [animated_number end_number="102" font_size="50" text_align="textright" bold="1" margin_top="20"]0[/animated_number] 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. [/p] [section_break type="blank" margin_top="15" margin_bottom="20"] [accordion style="plain"] [accordion_toggle title="Get code"]
[animated_number end_number="102" font_size="50" text_align="textright" bold="1"] [/animated_number]
[/accordion_toggle] [/accordion] [/col] [/row]
Download - $44