{"id":78858,"date":"2017-02-09T11:00:48","date_gmt":"2017-02-09T16:00:48","guid":{"rendered":"https:\/\/www.templatemonster.com\/help\/?p=78858"},"modified":"2017-03-06T03:05:49","modified_gmt":"2017-03-06T08:05:49","slug":"js-animated-use-countto-counter","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-use-countto-counter.html","title":{"rendered":"JS Animated. How to use CountTo &#8211; Counter"},"content":{"rendered":"<p>HTML Website Templates use <strong>countTo.js<\/strong> extension to add counters to webpage. This time we&#8217;ll learn how to manage them.<\/p> \r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/YFTTo_cYW34\"><\/iframe>\r\n<\/div>\r\n<p>There might be a separate page (html file) for displaying counters or progress bars. Let&#8217;s open the <strong>progress-bars.html<\/strong> file to edit it. \r\nIn our case these are <em>Buses, Miles, Drivers and Passengers<\/em>.<\/p> \r\n \r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.1.png\" alt=\"How to use CountTo - Counter.1\" width=\"1200\" height=\"533\" class=\"alignnone size-full wp-image-78859\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.1.png 1200w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.1-150x67.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.1-300x133.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.1-768x341.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.1-1024x455.png 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a>\t\t\r\n<h4><strong>Creating new counter<\/strong><\/h4>\r\n\t<p>In order to create a new counter the following HTML code should be added to the page&#8217;s content:<\/p>\r\n\t\t<p>&lt;div class=&quot;counter&quot; data-from=&quot;25&quot; data-to=&quot;125&quot;&gt;&lt;\/div&gt;<br \/><\/p>\r\n\t<p>where, <em>data-from<\/em> attribute is responsible for counter origin, and <em>data-to<\/em> attribute &#8211; for the final result that will be displayed on page.<\/p>\r\n<h4>Counter working time correction<\/h4> \r\n\t<p>In order to change speed of counting you should add the <em>data-speed<\/em> attribute and set time interval of the counting, in milliseconds.<\/p>\r\n\t<p>For example,<\/p>\r\n\t\t<p>&lt;div class=&quot;counter&quot; data-from=&quot;25&quot; data-to=&quot;125&quot; data-speed=&quot;5000&quot;&gt;&lt;\/div&gt;<br \/><\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.2.png\" alt=\"How to use CountTo - Counter.2\" width=\"1506\" height=\"543\" class=\"alignnone size-full wp-image-78860\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.2.png 1506w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.2-150x54.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.2-300x108.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.2-768x277.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.2-1024x369.png 1024w\" sizes=\"(max-width: 1506px) 100vw, 1506px\" \/><\/a>\t\t\r\n<h4>Counter update interval<\/h4>\r\n\t\t<p>In order to change time interval between counter updates you should add <em>data-refresh-interval<\/em> attribute and set needed time interval in milliseconds.<\/p>\r\n\t<p>For example,<\/p>\r\n\t\t<p>&lt;div class=&quot;counter&quot; data-from=&quot;25&quot; data-to=&quot;125&quot; data-speed=&quot;5000&quot; data-refresh-interval=&quot;300&quot;&gt;&lt;\/div&gt;<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.3.png\" alt=\"How to use CountTo - Counter.3\" width=\"1286\" height=\"559\" class=\"alignnone size-full wp-image-78861\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.3.png 1286w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.3-150x65.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.3-300x130.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.3-768x334.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/How-to-use-CountTo-Counter.3-1024x445.png 1024w\" sizes=\"(max-width: 1286px) 100vw, 1286px\" \/><\/a>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=YFTTo_cYW34?width=1280&amp;height=720\" rel=\"prettyPhoto\">JS Animated. How to use CountTo &#8211; Counter<\/a>","protected":false},"excerpt":{"rendered":"<p>HTML Website Templates use <strong>countTo.js<\/strong> extension to add counters to webpage. This time we&#8217;ll learn how to manage them.<\/p>\n","protected":false},"author":67,"featured_media":78862,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[1045,2549,2415],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/78858"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=78858"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/78858\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/78862"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=78858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=78858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=78858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}