{"id":276,"date":"2017-02-19T04:15:43","date_gmt":"2017-02-19T04:15:43","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=276"},"modified":"2019-05-16T19:54:19","modified_gmt":"2019-05-16T19:54:19","slug":"animated-numbers","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/animated-numbers\/","title":{"rendered":"Animated Numbers"},"content":{"rendered":"\n<p><\/p>\n\n\n\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-zpliyy-f05771f0335b0e59941d806006cb9040\">\n#top .av-special-heading.av-zpliyy-f05771f0335b0e59941d806006cb9040{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-zpliyy-f05771f0335b0e59941d806006cb9040 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-zpliyy-f05771f0335b0e59941d806006cb9040 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-zpliyy-f05771f0335b0e59941d806006cb9040 av-special-heading-h1 blockquote modern-quote  avia-builder-el-1  el_after_av_codeblock  el_before_av_hr '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  >Animated Numbers<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-u2tnpw-b34cf2732808e56955ff3e4b1fc098b9 hr-default  avia-builder-el-2  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-tsr4sk-cfd74e5106749fad901250f8d289b540 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Overview and Settings<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-tqnk44-0785a1acb77508d8bddd879cefb1e8e1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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.<\/p>\n<p>Examples of <a href=\"https:\/\/kriesi.at\/themes\/enfold-2017\/elements\/animated-numbers\/\" target=\"_blank\" rel=\"noopener noreferrer\">animated number elements<\/a>.<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-15pf5re-c57351e64367488cdcc9d12f56d829b1\">\n.flex_column.av-15pf5re-c57351e64367488cdcc9d12f56d829b1{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-15pf5re-c57351e64367488cdcc9d12f56d829b1 av_one_half  avia-builder-el-5  el_after_av_textblock  el_before_av_one_half  first flex_column_div av-zero-column-padding  column-top-margin'     ><a href='https:\/\/www.facebook.com\/kriesi.at'  title=\"\"  class=\"avia-animated-number av-jnmrdl2p-4351f9601ccc805fe7473ce9668edcda av-force-default-color avia_animate_when_visible  avia-builder-el-6  avia-builder-el-no-sibling  \" data-timer=\"3000\"><strong class=\"heading avia-animated-number-title\"><span class='avia-animated-number-icon av-icon-before-number av-icon-char avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue8f5' data-av_iconfont='entypo-fontello' ><\/span><span class=\"avia-single-number __av-single-number\" data-number_format=\"\" data-number=\"12822\" data-start_from=\"0\">12822<\/span><\/strong><div class=\"avia-animated-number-content\"><p>Follow us on facebook<\/p>\n<\/div><\/a><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-wnxhca-8802d4a09345435c28e3f4c183cdf594\">\n.flex_column.av-wnxhca-8802d4a09345435c28e3f4c183cdf594{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-wnxhca-8802d4a09345435c28e3f4c183cdf594 av_one_half  avia-builder-el-7  el_after_av_one_half  el_before_av_hr  flex_column_div av-zero-column-padding  column-top-margin'     ><a href='https:\/\/kriesi.at\/support\/'  title=\"\"  class=\"avia-animated-number av-jnmrdl2p-003ac9a1c70dbc6b6d3fcbd634746c52 av-force-default-color avia_animate_when_visible  avia-builder-el-8  avia-builder-el-no-sibling  \" data-timer=\"3000\"><strong class=\"heading avia-animated-number-title\"><span class='avia-animated-number-icon av-icon-before-number av-icon-char avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue8b9' data-av_iconfont='entypo-fontello' ><\/span><span class=\"avia-single-number __av-single-number\" data-number_format=\"\" data-number=\"24\" data-start_from=\"0\">24<\/span><span class=\"avia-no-number\">\/<\/span><span class=\"avia-single-number __av-single-number\" data-number_format=\"\" data-number=\"7\" data-start_from=\"0\">7<\/span><span class=\"avia-no-number\"> Support<\/span><\/strong><div class=\"avia-animated-number-content\"><p>Got an issue? Get in touch!<\/p>\n<\/div><\/a><\/div>\n<div  class='hr av-tgqjho-47ce6192e5139f892b9e3069ec78b8a3 hr-default  avia-builder-el-9  el_after_av_one_half  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-tayun0-440bd971a3c4dac0914f9c3215d4c0ac '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Code Snippets<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-11  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to 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.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-sznbcc-5d8c10905326ecadec16e63145ff4115 hr-default  avia-builder-el-12  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2vxvrw-90afc02d16727c6b55378cfcf14ea47f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode <\/h3>\n<\/div><\/section>\n\n<div  class='hr av-sbuq5g-21d5d5b5462ebe39c627cec2d93dcd2f hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-s65wp0-7a685e6e89c49cc1f9230f293be1d85f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-s65wp0-9a1ada89d5eed5f0a2a04d1f12e190e4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><p>Before we start to customize the animated number element, please enable custom CSS class name support from\u00a0<strong>Enfold theme options > Layout Builder<\/strong>\u00a0and apply\u00a0the required custom class name \u201c<strong>my-custom-animated-numbers<\/strong>\u201d to the animated numbers element for the code snippets to work well.<\/p>\n<\/div><\/section>\n<div  class='hr av-2t4e84-2dd0a0903bdd4038e5fd8a68edd660d5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Animated Numbers<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jnmmvv0b-e2a3731690f7c341e9d7a859f363610e av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-292ttmy-a88644aa114c7aa7328b7778c984d001'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-1' data-fake-id='#toggle-id-1' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-1' data-slide-speed=\"200\" data-title=\"Font Style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font Style\" data-aria_expanded=\"Click to collapse: Font Style\">Font Style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>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.<\/p>\n<p>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.<\/p>\n<pre><code>\n\n\/* Import external fonts ( Add the @import line to the top of your stylesheet) *\/\n@import url('https:\/\/fonts.googleapis.com\/css?family=Caveat+Brush|Gochi+Hand');\n\n\n\n\/* Animated numbers font style*\/\n#top .my-custom-animated-numbers-font.avia-animated-number .avia-single-number {\n      font-family: 'Caveat Brush', cursive;\n      color:#333;\n}\n\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-5jeax6-dfc1e629e221136442588f25807adf22'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-2' data-fake-id='#toggle-id-2' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-2' data-slide-speed=\"200\" data-title=\"Background\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Background\" data-aria_expanded=\"Click to collapse: Background\">Background<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-2' aria-labelledby='toggle-toggle-id-2' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To add a background color to the animated number please use the below CSS<\/p>\n<pre><code>\n\/* Animated number background *\/\n#top .my-custom-animated-numbers.avia-animated-number .avia-single-number {\n      background: red;\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-zlys6i-724835ff40c54622029951df48c91bed'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-3' data-fake-id='#toggle-id-3' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-3' data-slide-speed=\"200\" data-title=\"Border\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Border\" data-aria_expanded=\"Click to collapse: Border\">Border<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-3' aria-labelledby='toggle-toggle-id-3' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To display a border only around the animated number, please use the below code:<\/p>\n<pre><code>\n#top .my-custom-animated-numbers.avia-animated-number .avia-single-number {\n      border:2px solid red;\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-tszmui-139a66f0032d3821f72219bfb86e010e'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-4' data-fake-id='#toggle-id-4' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-4' data-slide-speed=\"200\" data-title=\"Hover Style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover Style\" data-aria_expanded=\"Click to collapse: Hover Style\">Hover Style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-4' aria-labelledby='toggle-toggle-id-4' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The below code will make changes to the animated number on hover<\/p>\n<pre><code>\n#top .my-custom-animated-numbers.avia-animated-number:hover .avia-single-number {\n      color: red;\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-2t4e84-2dd0a0903bdd4038e5fd8a68edd660d5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Description Text<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jnmmvv0b-e2a3731690f7c341e9d7a859f363610e av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-qtgqzu-5951c6dead028e05b089e723df1eed6b'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-5' data-fake-id='#toggle-id-5' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-5' data-slide-speed=\"200\" data-title=\"Font Style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font Style\" data-aria_expanded=\"Click to collapse: Font Style\">Font Style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-5' aria-labelledby='toggle-toggle-id-5' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>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.<\/p>\n<pre><code>\n\n\n#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-content p {\n      background: red;\n     font-family: 'Caveat Brush', cursive;\n      color:#333;\n}\n\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1jxk8bu-8843a0de91846bd7f0e3174d3c299a3a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-6' data-fake-id='#toggle-id-6' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-6' data-slide-speed=\"200\" data-title=\"Background\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Background\" data-aria_expanded=\"Click to collapse: Background\">Background<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-6' aria-labelledby='toggle-toggle-id-6' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The below code will add a background color to the description text.<\/p>\n<pre><code>\n#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-content p {\n      background: red;\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-13vgbxm-dc82516c093d19ed1d67dbb696dd67f8'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-7' data-fake-id='#toggle-id-7' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-7' data-slide-speed=\"200\" data-title=\"Border\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Border\" data-aria_expanded=\"Click to collapse: Border\">Border<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-7' aria-labelledby='toggle-toggle-id-7' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To a border style to the description text please use the below code<\/p>\n<pre><code>\n#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-content p {\n      border: 2px solid red;\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-nwz6bu-5763e0efedd1e607bce7e2ed7db66976'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-8' data-fake-id='#toggle-id-8' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-8' data-slide-speed=\"200\" data-title=\"Hover Style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover Style\" data-aria_expanded=\"Click to collapse: Hover Style\">Hover Style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-8' aria-labelledby='toggle-toggle-id-8' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Use the below code to change the description text style on hover<\/p>\n<pre><code>\n\n#top .my-custom-animated-numbers.avia-animated-number:hover .avia-animated-number-content p {\n      background: red;\n}\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-2t4e84-2dd0a0903bdd4038e5fd8a68edd660d5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Icon<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jnmmvv0b-e2a3731690f7c341e9d7a859f363610e av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-83ohoq-3b405815158231aec4e92e2fd0f19f66'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-9' data-fake-id='#toggle-id-9' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-9' data-slide-speed=\"200\" data-title=\"Size\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Size\" data-aria_expanded=\"Click to collapse: Size\">Size<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-9' aria-labelledby='toggle-toggle-id-9' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Change the animated number icon size with the below code<\/p>\n<pre><code>\n\n#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-icon.av-icon-char:before {\n      font-size: 60px;\n}\n\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1nz4pqi-8ff2e6b804c51bd8cadf468f83425d41'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-10' data-fake-id='#toggle-id-10' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-10' data-slide-speed=\"200\" data-title=\"Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Color\" data-aria_expanded=\"Click to collapse: Color\">Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-10' aria-labelledby='toggle-toggle-id-10' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The below code will change the animated number icon color<\/p>\n<pre><code>\n\n#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-icon.av-icon-char:before {\n      font-size: 60px;\n}\n\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1d4bs96-9a10e9726c34e8537d07d08e71426c1d'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-11' data-fake-id='#toggle-id-11' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-11' data-slide-speed=\"200\" data-title=\"Background\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Background\" data-aria_expanded=\"Click to collapse: Background\">Background<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-11' aria-labelledby='toggle-toggle-id-11' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The below code will add a background color to the animated number icons.<\/p>\n<pre><code>\n\n#top .my-custom-animated-numbers.avia-animated-number .avia-animated-number-icon.av-icon-char:before {\n      background: gold;\n}\n\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-jz7v6y-0718794ee352fc628321ff376b0b1a55'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-12' data-fake-id='#toggle-id-12' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-12' data-slide-speed=\"200\" data-title=\"Border\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Border\" data-aria_expanded=\"Click to collapse: Border\">Border<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-12' aria-labelledby='toggle-toggle-id-12' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\n\n\n\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-rxnibu-92e0e911bf955bef4b22a80e6030f557'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-13' data-fake-id='#toggle-id-13' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-13' data-slide-speed=\"200\" data-title=\"Hover Style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover Style\" data-aria_expanded=\"Click to collapse: Hover Style\">Hover Style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-13' aria-labelledby='toggle-toggle-id-13' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Please use the below code to add a hover effect to the icon<\/p>\n<pre><code>\n\n#top .my-custom-animated-numbers.avia-animated-number:hover .avia-animated-number-icon.av-icon-char:before {\n      background: gold;\n}\n\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-rz2y6i-086730a9d91510bdb107ede1eef13904'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-14' data-fake-id='#toggle-id-14' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-14' data-slide-speed=\"200\" data-title=\"Alignment\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Alignment\" data-aria_expanded=\"Click to collapse: Alignment\">Alignment<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-14' aria-labelledby='toggle-toggle-id-14' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Icons in the animated number element can be aligned to the left or right of the\u00a0title 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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11750\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/animated-number-icons.png\" alt=\"\" width=\"482\" height=\"261\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/animated-number-icons.png 482w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/animated-number-icons-300x162.png 300w\" sizes=\"auto, (max-width: 482px) 100vw, 482px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-2t4e84-2dd0a0903bdd4038e5fd8a68edd660d5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Border<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jnmmvv0b-e2a3731690f7c341e9d7a859f363610e av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-psm0ne-826a5cd0b9b3cc58b450831570b627ce'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-15' data-fake-id='#toggle-id-15' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-15' data-slide-speed=\"200\" data-title=\"Animated Number border\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Animated Number border\" data-aria_expanded=\"Click to collapse: Animated Number border\">Animated Number border<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-15' aria-labelledby='toggle-toggle-id-15' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Add a border to the animated number element<\/p>\n<pre><code>\n\n#top .my-custom-animated-numbers.avia-animated-number {\n      box-shadow: inset 0 0 0 4px red;\n      padding: 30px;\n}\n\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-kx9uzu-2ec5d00dfd262a32b14b81876f2ae9b5'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-16' data-fake-id='#toggle-id-16' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-16' data-slide-speed=\"200\" data-title=\"Hover Style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover Style\" data-aria_expanded=\"Click to collapse: Hover Style\">Hover Style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-16' aria-labelledby='toggle-toggle-id-16' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Display a border around the animated number element on hover<\/p>\n<pre><code>\n\n#top .my-custom-animated-numbers.avia-animated-number {\n\tpadding: 30px;\n}\n#top .my-custom-animated-numbers.avia-animated-number:hover {\n      box-shadow: inset 0 0 0 4px red;\n}\n\n\n\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-2t4e84-2dd0a0903bdd4038e5fd8a68edd660d5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Background<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Animated numbers take the parent containers width and background effects.\u00a0 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.\u00a0 Below are some examples:<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jnmmvv0b-e2a3731690f7c341e9d7a859f363610e av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-25xtr0q-2377b4d8fb24c0413ee470dbba25c7f8'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-17' data-fake-id='#toggle-id-17' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-17' data-slide-speed=\"200\" data-title=\"Solid Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Solid Color\" data-aria_expanded=\"Click to collapse: Solid Color\">Solid Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-17' aria-labelledby='toggle-toggle-id-17' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The below code adds a solid background to the animated number element.<\/p>\n<pre><code>\n\n#top .my-custom-animated-numbers.avia-animated-number {\n      background: gold;\n      padding: 30px;\n}\n\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1feb696-81bd3749d356cdb8b0bffaf82a11c5ee'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-18' data-fake-id='#toggle-id-18' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-18' data-slide-speed=\"200\" data-title=\"Image\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Image\" data-aria_expanded=\"Click to collapse: Image\">Image<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-18' aria-labelledby='toggle-toggle-id-18' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To add a background image please edit the background image path in the below code and add it to your site.<\/p>\n<pre><code>\n\n#top .my-custom-animated-numbers.avia-animated-number {\n      background: url(BACKGRUOND IMAGE PATH);\n      padding: 30px;\n}\n\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-108l962-5b31dbff8813e90c3fde6d7c0da4a52e'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-19' data-fake-id='#toggle-id-19' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-19' data-slide-speed=\"200\" data-title=\"Gradient\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Gradient\" data-aria_expanded=\"Click to collapse: Gradient\">Gradient<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-19' aria-labelledby='toggle-toggle-id-19' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The below code adds a solid background to the animated number element.<\/p>\n<pre><code>\n\n#top .my-custom-animated-numbers.avia-animated-number {\n  background: #12c2e9;  \/* fallback for old browsers *\/\n  background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);  \/* Chrome 10-25, Safari 5.1-6 *\/\n  background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9); \/* W3C, IE 10+\/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *\/\n}\n\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-u7c6iy-b9674768d2f0fa3b1438f167900af175'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-20' data-fake-id='#toggle-id-20' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-20' data-slide-speed=\"200\" data-title=\"On mouse hover\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: On mouse hover\" data-aria_expanded=\"Click to collapse: On mouse hover\">On mouse hover<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-20' aria-labelledby='toggle-toggle-id-20' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Add a background effect on mouse hover using the below CSS<\/p>\n<pre><code>\n\n#top .my-custom-animated-numbers.avia-animated-number{\n      padding: 30px;\n}\n#top .my-custom-animated-numbers.avia-animated-number:hover {\n      background: gold;\n}\n\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-2t4e84-2dd0a0903bdd4038e5fd8a68edd660d5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shapes<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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.<\/p>\n<p>View examples of <a href=\"https:\/\/kriesi.at\/themes\/enfold-knowledgebase-demo\/#milestones_section\" target=\"_blank\" rel=\"noopener noreferrer\">circle animated numbers<\/a>.<\/p>\n<p>Another approach to achieve a similar result is by applying custom CSS to the animated numbers as seen below:<\/p>\n<p><strong>NOTE<\/strong>: Please disable the built-in circle in the element options before using the CSS version of the circular animated numbers.<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-wd5jai-ed4b694f467b8c0367546c85a7c46050\">\n.flex_column.av-wd5jai-ed4b694f467b8c0367546c85a7c46050{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-wd5jai-ed4b694f467b8c0367546c85a7c46050 av_one_half first flex_column_div av-zero-column-padding  '     ><div  class=\"avia-animated-number av-jnn8z5n8-88707834fd79cd51a5f247074194b076 av-force-default-color avia_animate_when_visible  avia-builder-el-15  avia-builder-el-no-sibling  av-animated-number-style-5 avia-color-font-light \" data-timer=\"3000\"><strong class=\"heading avia-animated-number-title\"><span class='avia-animated-number-icon av-icon-before-number av-icon-char avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue82f' data-av_iconfont='entypo-fontello' ><\/span><span class=\"avia-single-number __av-single-number\" data-number_format=\"\" data-number=\"1000\" data-start_from=\"0\">1000<\/span><span class=\"avia-no-number\"> %<\/span><\/strong><div class=\"avia-animated-number-content\"><p>Faster smoother uploads!<\/p>\n<\/div><\/div><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-2t4e84-87ff9ae072c41dc1828ece857d9129ef\">\n#top .hr.hr-invisible.av-2t4e84-87ff9ae072c41dc1828ece857d9129ef{\nheight:50px;\n}\n<\/style>\n<div  class='hr av-2t4e84-87ff9ae072c41dc1828ece857d9129ef hr-invisible  avia-builder-el-16  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<div  class='togglecontainer av-jnmmvv0b-e2a3731690f7c341e9d7a859f363610e av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-ly6qi2-7ff1e91288ca3920827b8c4d0682ce9c'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-21' data-fake-id='#toggle-id-21' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-21' data-slide-speed=\"200\" data-title=\"CSS for circle shape animated numbers\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS for circle shape animated numbers\" data-aria_expanded=\"Click to collapse: CSS for circle shape animated numbers\">CSS for circle shape animated numbers<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-21' aria-labelledby='toggle-toggle-id-21' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\n\n\/*----------------------------------------\n\/\/ Circle Animated number \n\/\/--------------------------------------*\/\n\n\n.my-custom-animated-numbers.avia-animated-number {\n    border: 2px solid #333;    \n    display: flex;\n    justify-content: center;\n    align-self: center;\n    width: 250px;\n    height: 250px;\n    border-radius: 250px;\n    flex-direction: column;\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n\/* Icon style *\/\n\n.my-custom-animated-numbers .avia-animated-number-icon:before {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    flex-direction: column;\n    margin-top: -60px;\n    font-size: 28px;\n}\n\n\/* Animated number description *\/\n\n.my-custom-animated-numbers .avia-animated-number-content {\t\n    margin-top: 10px;\n    width: 100%;\n    padding: 0 30px;\n}\n\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-2t4e84-2dd0a0903bdd4038e5fd8a68edd660d5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2qd78k-fe56e62a74c51305b1f962447de44fe5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Counter tricks<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-r6s7as-b698932574a23e13f4ef624d6ecb84aa '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Adding a comma between the digits will start the counter for each comma-separated number unit. Check out the examples below.<\/p>\n<\/div><\/section>\n\n<div  class='hr av-2t4e84-2dd0a0903bdd4038e5fd8a68edd660d5 hr-default  avia-builder-el-19  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Animation Speed<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-rpf2j8-9cf0c3023b455c78f1fe54f76729c11f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The speed of the animated numbers can be delayed to show the animation for a longer period by editing the shortcode.js file found in the wp-contentthemesenfoldjs folder.<\/p>\n<p>Increase the number 3000 to a greater number in the line:<\/p>\n<pre>var number_container = $(this), elements = number_container.find('.__av-single-number'), countTimer = number_container.data('timer') || 3000;<\/pre>\n<\/div><\/section>\n<div  class='hr av-pvuilg-cf258d7a8091e3ff191cd0e5149a5939 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<div  class='hr av-1q7es-38cab8de431e3d22f4f6fb1f8b4b39d7 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7thp8-9a7980251297cdb87ea56700f15b838c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=wsOqG9twVPk\">Animated numbers <\/a><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[2,6],"tags":[16],"class_list":["post-276","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","tag-content-elements","documentation","content-elements"],"modified_by":"vinay","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=276"}],"version-history":[{"count":7,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/276\/revisions"}],"predecessor-version":[{"id":12546,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/276\/revisions\/12546"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}