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