{"id":3721,"date":"2013-05-24T20:55:45","date_gmt":"2013-05-24T20:55:45","guid":{"rendered":"http:\/\/theme-fusion.com\/avadaxml\/?page_id=3721"},"modified":"2013-05-24T20:55:45","modified_gmt":"2013-05-24T20:55:45","slug":"animated-counters","status":"publish","type":"page","link":"https:\/\/www.grueneliga-thueringen.de\/fr\/animated-counters\/","title":{"rendered":"Animated Counters"},"content":{"rendered":"<style type='text\/css'>#reading-box-container-1 .tagline-shadow:before,#reading-box-container-1 .tagline-shadow:after{opacity:0.7;}<\/style><div class=\"reading-box-container\" id=\"reading-box-container-1\"><section class=\"reading-box tagline-shadow\" style=\"background-color:#fff !important;border-width:1px;border-color:#e8e6e6!important;border-top-width:3px !important;border-top-color:#566e14!important;border-style:solid;\"><p>Avada includes 3 different sets of animated counters; circles, boxes and bars. These are great for displaying varying types of data to your viewers, wether its sales percentages, skill levels, promotional levels or any other numbers.<\/p><\/section><\/div>\n<div class=\"demo-sep sep-none\" style=\"margin-top:80px;\"><\/div>\n<div class=\"title\"><h2>Animated Counter Circles<\/h2><div class=\"title-sep-container\"><div class=\"title-sep\"><\/div><\/div><\/div>\n<div class=\"counters-circle clearfix\"><script type='text\/javascript'>\n\t\tjQuery(document).ready(function() {\n\t\t\tvar opts = {\n\t\t\t  lines: 12, \/\/ The number of lines to draw\n\t\t\t  angle: 0.5, \/\/ The length of each line\n\t\t\t  lineWidth: 0.05, \/\/ The line thickness\n\t\t\t  colorStart: '#9db668',   \/\/ Colors\n\t\t\t  colorStop: '#9db668',    \/\/ just experiment with them\n\t\t\t  strokeColor: '#f6f6f6',   \/\/ to see which ones work best for you\n\t\t\t  generateGradient: false\n\t\t\t};\n\t\t\tvar gauge_1 = new Donut(document.getElementById('counter-circle-1')).setOptions(opts); \/\/ create sexy gauge!\n\t\t\tgauge_1.maxValue = 100; \/\/ set max gauge value\n\t\t\tgauge_1.animationSpeed = 128; \/\/ set animation speed (32 is default value)\n\t\t\tgauge_1.set(75); \/\/ set actual value\n\t\t});\n\t\t<\/script><div class=\"counter-circle-wrapper\"><canvas width=\"220\" height=\"220\" class=\"counter-circle\" id=\"counter-circle-1\"><\/canvas><div class=\"counter-circle-content\">75%<\/div><\/div><script type='text\/javascript'>\n\t\tjQuery(document).ready(function() {\n\t\t\tvar opts = {\n\t\t\t  lines: 12, \/\/ The number of lines to draw\n\t\t\t  angle: 0.5, \/\/ The length of each line\n\t\t\t  lineWidth: 0.05, \/\/ The line thickness\n\t\t\t  colorStart: '#9db668',   \/\/ Colors\n\t\t\t  colorStop: '#9db668',    \/\/ just experiment with them\n\t\t\t  strokeColor: '#f6f6f6',   \/\/ to see which ones work best for you\n\t\t\t  generateGradient: false\n\t\t\t};\n\t\t\tvar gauge_2 = new Donut(document.getElementById('counter-circle-2')).setOptions(opts); \/\/ create sexy gauge!\n\t\t\tgauge_2.maxValue = 100; \/\/ set max gauge value\n\t\t\tgauge_2.animationSpeed = 128; \/\/ set animation speed (32 is default value)\n\t\t\tgauge_2.set(30); \/\/ set actual value\n\t\t});\n\t\t<\/script><div class=\"counter-circle-wrapper\"><canvas width=\"220\" height=\"220\" class=\"counter-circle\" id=\"counter-circle-2\"><\/canvas><div class=\"counter-circle-content\"><i style=\"color:#ffffff !important;\"class=\"fontawesome-icon large circle-no icon-adjust\"><\/i><\/div><\/div><script type='text\/javascript'>\n\t\tjQuery(document).ready(function() {\n\t\t\tvar opts = {\n\t\t\t  lines: 12, \/\/ The number of lines to draw\n\t\t\t  angle: 0.5, \/\/ The length of each line\n\t\t\t  lineWidth: 0.05, \/\/ The line thickness\n\t\t\t  colorStart: '#9db668',   \/\/ Colors\n\t\t\t  colorStop: '#9db668',    \/\/ just experiment with them\n\t\t\t  strokeColor: '#f6f6f6',   \/\/ to see which ones work best for you\n\t\t\t  generateGradient: false\n\t\t\t};\n\t\t\tvar gauge_3 = new Donut(document.getElementById('counter-circle-3')).setOptions(opts); \/\/ create sexy gauge!\n\t\t\tgauge_3.maxValue = 100; \/\/ set max gauge value\n\t\t\tgauge_3.animationSpeed = 128; \/\/ set animation speed (32 is default value)\n\t\t\tgauge_3.set(70); \/\/ set actual value\n\t\t});\n\t\t<\/script><div class=\"counter-circle-wrapper\"><canvas width=\"220\" height=\"220\" class=\"counter-circle\" id=\"counter-circle-3\"><\/canvas><div class=\"counter-circle-content\">7\/10<\/div><\/div><script type='text\/javascript'>\n\t\tjQuery(document).ready(function() {\n\t\t\tvar opts = {\n\t\t\t  lines: 12, \/\/ The number of lines to draw\n\t\t\t  angle: 0.5, \/\/ The length of each line\n\t\t\t  lineWidth: 0.05, \/\/ The line thickness\n\t\t\t  colorStart: '#9db668',   \/\/ Colors\n\t\t\t  colorStop: '#9db668',    \/\/ just experiment with them\n\t\t\t  strokeColor: '#f6f6f6',   \/\/ to see which ones work best for you\n\t\t\t  generateGradient: false\n\t\t\t};\n\t\t\tvar gauge_4 = new Donut(document.getElementById('counter-circle-4')).setOptions(opts); \/\/ create sexy gauge!\n\t\t\tgauge_4.maxValue = 100; \/\/ set max gauge value\n\t\t\tgauge_4.animationSpeed = 128; \/\/ set animation speed (32 is default value)\n\t\t\tgauge_4.set(50); \/\/ set actual value\n\t\t});\n\t\t<\/script><div class=\"counter-circle-wrapper\"><canvas width=\"220\" height=\"220\" class=\"counter-circle\" id=\"counter-circle-4\"><\/canvas><div class=\"counter-circle-content\">Title<\/div><\/div><\/div>\n<div class=\"demo-sep sep-none\" style=\"margin-top:70px;\"><\/div>\n<div class=\"title\"><h2>Animated Counter Boxes<\/h2><div class=\"title-sep-container\"><div class=\"title-sep\"><\/div><\/div><\/div>\n<div class=\"counters-box\"><div class=\"counter-box-wrapper\"><div class=\"content-box-percentage\"><span class=\"display-percentage\" data-percentage=\"75\">0<\/span><span class=\"percent\">%<\/span><\/div><div class=\"counter-box-content\">Counter Title Goes Here<\/div><\/div><div class=\"counter-box-wrapper\"><div class=\"content-box-percentage\"><span class=\"display-percentage\" data-percentage=\"55\">0<\/span><span class=\"percent\">%<\/span><\/div><div class=\"counter-box-content\">Counter Title Goes Here<\/div><\/div><div class=\"counter-box-wrapper\"><div class=\"content-box-percentage\"><span class=\"display-percentage\" data-percentage=\"65\">0<\/span><span class=\"percent\">%<\/span><\/div><div class=\"counter-box-content\">Counter Title Goes Here<\/div><\/div><div class=\"counter-box-wrapper\"><div class=\"content-box-percentage\"><span class=\"display-percentage\" data-percentage=\"85\">0<\/span><span class=\"percent\">%<\/span><\/div><div class=\"counter-box-content\">Counter Title Goes Here<\/div><\/div><\/div>\n<div class=\"demo-sep sep-none\" style=\"margin-top:70px;\"><\/div>\n<div class=\"title\"><h2>Animated Counter Progress Bars<\/h2><div class=\"title-sep-container\"><div class=\"title-sep\"><\/div><\/div><\/div>\n<div class=\"progress-bar\" style=\"background-color:#f6f6f6 !important;border-color:#f6f6f6 !important;\"><div class=\"progress-bar-content\" data-percentage=\"95\" style=\"width: 95%;background-color:#9db668 !important;border-color:#9db668 !important;\"><\/div><span class=\"progress-title\">Your Title Here 95%<\/span><\/div>\n<div class=\"progress-bar\" style=\"background-color:#f6f6f6 !important;border-color:#f6f6f6 !important;\"><div class=\"progress-bar-content\" data-percentage=\"80\" style=\"width: 80%;background-color:#9db668 !important;border-color:#9db668 !important;\"><\/div><span class=\"progress-title\">Your Title Here 80%<\/span><\/div>\n<div class=\"progress-bar\" style=\"background-color:#f6f6f6 !important;border-color:#f6f6f6 !important;\"><div class=\"progress-bar-content\" data-percentage=\"75\" style=\"width: 75%;background-color:#9db668 !important;border-color:#9db668 !important;\"><\/div><span class=\"progress-title\">Your Title Here 75%<\/span><\/div>\n<div class=\"progress-bar\" style=\"background-color:#f6f6f6 !important;border-color:#f6f6f6 !important;\"><div class=\"progress-bar-content\" data-percentage=\"60\" style=\"width: 60%;background-color:#9db668 !important;border-color:#9db668 !important;\"><\/div><span class=\"progress-title\">Your Title Here 60%<\/span><\/div>\n<div class=\"demo-sep sep-none\" style=\"margin-top:70px;\"><\/div>\n<div class=\"title\"><h2>Features and Customizations<\/h2><div class=\"title-sep-container\"><div class=\"title-sep\"><\/div><\/div><\/div>\n<div class=\"one_half\">\n<style type='text\/css'>\n\t.post-content ul.list-icon li:before{color:light !important;}\n\t.rtl .post-content ul.list-icon li:after{color:light !important;}\n\t<\/style>\n<ul class=\"list-icon circle-yes list-icon-check\">\n<li>3 different styles with nice jQuery animation effects<\/li>\n<li>Insert custom titles and %&rsquo;s per item, unlimited use per page<\/li>\n<\/ul>\n\n<\/div>\n<div class=\"one_half last\">\n<style type='text\/css'>\n\t.post-content ul.list-icon li:before{color:light !important;}\n\t.rtl .post-content ul.list-icon li:after{color:light !important;}\n\t<\/style>\n<ul class=\"list-icon circle-yes list-icon-check\">\n<li>Use %, Icon, Number Scale &amp; Title with the counter circles<\/li>\n<li>Customize the filled and unfilled colors for circles and boxes<\/li>\n<\/ul>\n\n<\/div><div class=\"clearboth\"><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"full-width.php","meta":{"footnotes":""},"class_list":["post-3721","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.grueneliga-thueringen.de\/fr\/wp-json\/wp\/v2\/pages\/3721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.grueneliga-thueringen.de\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.grueneliga-thueringen.de\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.grueneliga-thueringen.de\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.grueneliga-thueringen.de\/fr\/wp-json\/wp\/v2\/comments?post=3721"}],"version-history":[{"count":0,"href":"https:\/\/www.grueneliga-thueringen.de\/fr\/wp-json\/wp\/v2\/pages\/3721\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.grueneliga-thueringen.de\/fr\/wp-json\/wp\/v2\/media?parent=3721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}