{"id":2716,"date":"2014-05-26T09:05:10","date_gmt":"2014-05-26T09:05:10","guid":{"rendered":"http:\/\/192.168.0.101\/user24\/wordpress\/wordpress-3.9.1-treehouse\/?page_id=2660"},"modified":"2014-05-26T09:05:10","modified_gmt":"2014-05-26T09:05:10","slug":"progress-bars","status":"publish","type":"page","link":"https:\/\/www.gioiellibaravelli.it\/shortcodes-2\/progress-bars\/","title":{"rendered":"Progress Bar &#038;  Pie Chart"},"content":{"rendered":"<div id=\"pl-2716\"  class=\"panel-layout\" >\n<div id=\"pg-2716-0\"  class=\"panel-grid panel-no-style\" >\n<div id=\"pgc-2716-0-0\"  class=\"panel-grid-cell\" >\n<div id=\"panel-2716-0-0-0\" class=\"so-panel widget widget_black-studio-tinymce widget_black_studio_tinymce panel-first-child panel-last-child\" data-index=\"0\" >\n<h3 class=\"widget-title\">Progressbar Code<\/h3>\n<div class=\"textwidget\">\n<div class=\"main-container   \" style=\"padding:20px 0;margin:0;overflow: hidden;\">\n<div class=\"inner-container\"><\/p>\n<div class=\"shortcode-title center\">\n<h1 class=\"simple-type medium-title\">Progress bar<\/h1>\n<\/div>\n<p><\/p>\n<div class=\"code\">[ progressbar]<br \/>[ tm_progressbar color=\"FFFFFF\" background_color=\"E76453\" value=\"80\" show_percentage=\"yes | no\" style=\"1 | 2 | 3 \"] <br \/>Web Development <br \/>[ \/tm_progressbar ]<br \/>[ \/progressbar ]<\/div>\n<p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"pg-2716-1\"  class=\"panel-grid panel-no-style\" >\n<div id=\"pgc-2716-1-0\"  class=\"panel-grid-cell\" >\n<div id=\"panel-2716-1-0-0\" class=\"so-panel widget widget_black-studio-tinymce widget_black_studio_tinymce panel-first-child panel-last-child\" data-index=\"1\" >\n<h3 class=\"widget-title\">Progressbar<\/h3>\n<div class=\"textwidget\">\n<div class=\"main-container   \" style=\"padding:20px 0;margin:0;overflow: hidden;\">\n<div class=\"inner-container\"><\/p>\n<div class=\"shortcode-title center\">\n<h1 class=\"border-type small-title\">Style One<\/h1>\n<\/div>\n<p><\/p>\n<div class=\"divider_content\">\n<div class=\"divider_content_inner divider_element\">\n<div class=\"\" style=\"height:10px;\"><\/div>\n<\/div>\n<\/div>\n<p><\/p>\n<div class=\"progressbar-container\">\n<div class=\"progressbar-content 1\">\n<div class=\"tm_progresbar style-1\">\n<div class=\"active_progresbar\" style=\"color:#FFFFFF\" data-value=\"80\" data-percentage-value=\"80\"><small class=\"progress_detail\" style=\"color:#FFFFFF\">Web Development<span class=\"tm_progress_label\">80%<\/span><\/small><span class=\"value animated\" data-animated=\"fadeInLeft\" style=\"width:80%; background-color:#E76453;\"><\/span><\/div>\n<\/div>\n<div class=\"tm_progresbar style-1\">\n<div class=\"active_progresbar\" style=\"color:#FFFFFF\" data-value=\"64\" data-percentage-value=\"64\"><small class=\"progress_detail\" style=\"color:#FFFFFF\">Marketing &amp; PR <span class=\"tm_progress_label\">64%<\/span><\/small><span class=\"value animated\" data-animated=\"fadeInLeft\" style=\"width:64%; background-color:#E76453;\"><\/span><\/div>\n<\/div>\n<div class=\"tm_progresbar style-1\">\n<div class=\"active_progresbar\" style=\"color:#FFFFFF\" data-value=\"70\" data-percentage-value=\"70\"><small class=\"progress_detail\" style=\"color:#FFFFFF\">Web Designing <span class=\"tm_progress_label\">70%<\/span><\/small><span class=\"value animated\" data-animated=\"fadeInLeft\" style=\"width:70%; background-color:#E76453;\"><\/span><\/div>\n<\/div>\n<div class=\"tm_progresbar style-1\">\n<div class=\"active_progresbar\" style=\"color:#FFFFFF\" data-value=\"45\" data-percentage-value=\"45\"><small class=\"progress_detail\" style=\"color:#FFFFFF\">Consulting <span class=\"tm_progress_label\">45%<\/span><\/small><span class=\"value animated\" data-animated=\"fadeInLeft\" style=\"width:45%; background-color:#E76453;\"><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/div>\n<\/div>\n<div class=\"main-container   \" style=\"padding:20px 0;margin:0;overflow: hidden;\">\n<div class=\"inner-container\"><\/p>\n<div class=\"shortcode-title center\">\n<h1 class=\"border-type small-title\">Style Two<\/h1>\n<\/div>\n<p><\/p>\n<div class=\"divider_content\">\n<div class=\"divider_content_inner divider_element\">\n<div class=\"\" style=\"height:10px;\"><\/div>\n<\/div>\n<\/div>\n<p><\/p>\n<div class=\"progressbar-container\">\n<div class=\"progressbar-content 1\">\n<div class=\"tm_progresbar style-2\">\n<div class=\"active_progresbar\" style=\"color:#FFFFFF\" data-value=\"80\" data-percentage-value=\"80\"><small class=\"progress_detail\" style=\"color:#FFFFFF\">Web Development <\/small><span class=\"value animated\" data-animated=\"fadeInLeft\" style=\"width:80%; background-color:#E76453;\"><\/span><\/div>\n<\/div>\n<div class=\"tm_progresbar style-2\">\n<div class=\"active_progresbar\" style=\"color:#FFFFFF\" data-value=\"64\" data-percentage-value=\"64\"><small class=\"progress_detail\" style=\"color:#FFFFFF\">Marketing &amp; PR <\/small><span class=\"value animated\" data-animated=\"fadeInLeft\" style=\"width:64%; background-color:#E76453;\"><\/span><\/div>\n<\/div>\n<div class=\"tm_progresbar style-2\">\n<div class=\"active_progresbar\" style=\"color:#FFFFFF\" data-value=\"70\" data-percentage-value=\"70\"><small class=\"progress_detail\" style=\"color:#FFFFFF\">Web Designing <\/small><span class=\"value animated\" data-animated=\"fadeInLeft\" style=\"width:70%; background-color:#E76453;\"><\/span><\/div>\n<\/div>\n<div class=\"tm_progresbar style-2\">\n<div class=\"active_progresbar\" style=\"color:#FFFFFF\" data-value=\"45\" data-percentage-value=\"45\"><small class=\"progress_detail\" style=\"color:#FFFFFF\">Consulting <\/small><span class=\"value animated\" data-animated=\"fadeInLeft\" style=\"width:45%; background-color:#E76453;\"><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/div>\n<\/div>\n<div class=\"main-container   \" style=\"padding:20px 0;margin:0;overflow: hidden;\">\n<div class=\"inner-container\"><\/p>\n<div class=\"shortcode-title center\">\n<h1 class=\"border-type small-title\">Style Three <\/h1>\n<\/div>\n<p><\/p>\n<div class=\"divider_content\">\n<div class=\"divider_content_inner divider_element\">\n<div class=\"\" style=\"height:10px;\"><\/div>\n<\/div>\n<\/div>\n<p><\/p>\n<div class=\"progressbar-container\">\n<div class=\"progressbar-content 1\">\n<div class=\"tm_progresbar style-3\">\n<div class=\"active_progresbar\" style=\"color:#FFFFFF\" data-value=\"80\" data-percentage-value=\"80\"><small class=\"progress_detail\" style=\"color:#FFFFFF\">Web Development <span class=\"tm_progress_label\">80%<\/span><\/small><span class=\"value animated\" data-animated=\"fadeInLeft\" style=\"width:80%; background-color:#E76453;\"><\/span><\/div>\n<\/div>\n<div class=\"tm_progresbar style-3\">\n<div class=\"active_progresbar\" style=\"color:#FFFFFF\" data-value=\"64\" data-percentage-value=\"64\"><small class=\"progress_detail\" style=\"color:#FFFFFF\">Marketing &amp; PR <span class=\"tm_progress_label\">64%<\/span><\/small><span class=\"value animated\" data-animated=\"fadeInLeft\" style=\"width:64%; background-color:#E76453;\"><\/span><\/div>\n<\/div>\n<div class=\"tm_progresbar style-3\">\n<div class=\"active_progresbar\" style=\"color:#FFFFFF\" data-value=\"70\" data-percentage-value=\"70\"><small class=\"progress_detail\" style=\"color:#FFFFFF\">Web Designing <span class=\"tm_progress_label\">70%<\/span><\/small><span class=\"value animated\" data-animated=\"fadeInLeft\" style=\"width:70%; background-color:#E76453;\"><\/span><\/div>\n<\/div>\n<div class=\"tm_progresbar style-3\">\n<div class=\"active_progresbar\" style=\"color:#FFFFFF\" data-value=\"45\" data-percentage-value=\"45\"><small class=\"progress_detail\" style=\"color:#FFFFFF\">Consulting <span class=\"tm_progress_label\">45%<\/span><\/small><span class=\"value animated\" data-animated=\"fadeInLeft\" style=\"width:45%; background-color:#E76453;\"><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/div>\n<\/div>\n<div class=\"main-container   \" style=\"padding:20px 0;margin:0;overflow: hidden;\">\n<div class=\"inner-container\"><\/p>\n<div class=\"shortcode-title center\">\n<h1 class=\"border-type small-title\">Style Four <\/h1>\n<\/div>\n<p><\/p>\n<div class=\"divider_content\">\n<div class=\"divider_content_inner divider_element\">\n<div class=\"\" style=\"height:10px;\"><\/div>\n<\/div>\n<\/div>\n<p><\/p>\n<div class=\"progressbar-container\">\n<div class=\"progressbar-content 1\">\n<div class=\"tm_progresbar style-4\"><small class=\"progress_detail\">Web Development <span class=\"tm_progress_label\">80%<\/span><\/small><\/p>\n<div class=\"active_progresbar\" style=\"color:FFFFFF\" data-value=\"80\" data-percentage-value=\"80\"><span class=\"value animated\" data-animated=\"fadeInLeft\" style=\"width:80%; background-color:#E76453;\"><\/span><\/div>\n<\/div>\n<div class=\"tm_progresbar style-4\"><small class=\"progress_detail\">Marketing &amp; PR <span class=\"tm_progress_label\">64%<\/span><\/small><\/p>\n<div class=\"active_progresbar\" style=\"color:FFFFFF\" data-value=\"64\" data-percentage-value=\"64\"><span class=\"value animated\" data-animated=\"fadeInLeft\" style=\"width:64%; background-color:#E76453;\"><\/span><\/div>\n<\/div>\n<div class=\"tm_progresbar style-4\"><small class=\"progress_detail\">Web Designing <span class=\"tm_progress_label\">70%<\/span><\/small><\/p>\n<div class=\"active_progresbar\" style=\"color:FFFFFF\" data-value=\"70\" data-percentage-value=\"70\"><span class=\"value animated\" data-animated=\"fadeInLeft\" style=\"width:70%; background-color:#E76453;\"><\/span><\/div>\n<\/div>\n<div class=\"tm_progresbar style-4\"><small class=\"progress_detail\">Consulting <span class=\"tm_progress_label\">45%<\/span><\/small><\/p>\n<div class=\"active_progresbar\" style=\"color:FFFFFF\" data-value=\"45\" data-percentage-value=\"45\"><span class=\"value animated\" data-animated=\"fadeInLeft\" style=\"width:45%; background-color:#E76453;\"><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"pg-2716-2\"  class=\"panel-grid panel-no-style\" >\n<div id=\"pgc-2716-2-0\"  class=\"panel-grid-cell\" >\n<div id=\"panel-2716-2-0-0\" class=\"so-panel widget widget_black-studio-tinymce widget_black_studio_tinymce panel-first-child panel-last-child\" data-index=\"2\" >\n<h3 class=\"widget-title\">Piechart Code<\/h3>\n<div class=\"textwidget\">\n<div class=\"main-container   \" style=\"padding:20px 0;margin:0;overflow: hidden;\">\n<div class=\"inner-container\"><\/p>\n<div class=\"shortcode-title center\">\n<h1 class=\"simple-type medium-title\">Pie Chart<\/h1>\n<\/div>\n<p><\/p>\n<div class=\"code\">[ tm_piechart background_color=\"#E76453\" percentage=\"15\" title=\"Praesent magna\"] CONTENTS [ \/tm_piechart ]<\/div>\n<p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"pg-2716-3\"  class=\"panel-grid panel-no-style\" >\n<div id=\"pgc-2716-3-0\"  class=\"panel-grid-cell\" >\n<div id=\"panel-2716-3-0-0\" class=\"so-panel widget widget_black-studio-tinymce widget_black_studio_tinymce panel-first-child panel-last-child\" data-index=\"3\" >\n<h3 class=\"widget-title\">Pie Chart<\/h3>\n<div class=\"textwidget\">\n<div class=\"main-container   \" style=\"padding:20px 0;margin:0;overflow: hidden;\">\n<div class=\"inner-container\"><\/p>\n<div class=\"one_fourth\">\n<div class=\"one_fourth_inner content-inner left\" style=\"margin:0;width:90%;\"><\/p>\n<div class=\"tm_piechart column4\">\n<div class=\"chart_top\"><span class=\"chart_il tmchat_wrapper animated\" data-percent=\"50\"><span class=\"percent\" style=\"color:#E76453;\"><\/span><\/span><\/div>\n<div class=\"chart_bottom\">\n<h2 class=\"chart_title\">Praesent magna<\/h2>\n<div class=\"chart_desc\">Nunc molestie dolor nec magna fermen atum in pharetra orci mollis. Nam tempor diam elit fermen atum in pharetra orci mollis.<\/div>\n<\/div>\n<\/div>\n<p><script type='text\/javascript'>\n\t jQuery(function() {\n\t jQuery('.chart_il').waypoint(function() {\n\t jQuery(this).easyPieChart({\n\t easing:'easeOutBounce',\n\t animate: {duration: 2000, enabled: true},\n\t barColor: '#E76453',\n\t trackColor: '#EAEAEB',\n\t scaleColor: '',\n\t lineWidth: 8,\n\t size: 130,\n\t onStep: function(from, to, percent) { {\n\t\t jQuery(this.el).find('.percent').text(Math.round(percent));\n\t } \n\t } }); \n\t }, {\n\t\t\t  triggerOnce: true,\n\t\t\t  offset: 'bottom-in-view'\n\t\t\t});\n\t}); \n<\/script><\/p>\n<\/div>\n<\/div>\n<p><\/p>\n<div class=\"one_fourth\">\n<div class=\"one_fourth_inner content-inner left\" style=\"margin:0;width:90%;\"><\/p>\n<div class=\"tm_piechart column4\">\n<div class=\"chart_top\"><span class=\"chart_so tmchat_wrapper animated\" data-percent=\"35\"><span class=\"percent\" style=\"color:#E76453;\"><\/span><\/span><\/div>\n<div class=\"chart_bottom\">\n<h2 class=\"chart_title\">Conse viverra<\/h2>\n<div class=\"chart_desc\">Nunc molestie dolor nec magna fermen atum in pharetra orci mollis. Nam tempor diam elit fermen atum in pharetra orci mollis.<\/div>\n<\/div>\n<\/div>\n<p><script type='text\/javascript'>\n\t jQuery(function() {\n\t jQuery('.chart_so').waypoint(function() {\n\t jQuery(this).easyPieChart({\n\t easing:'easeOutBounce',\n\t animate: {duration: 2000, enabled: true},\n\t barColor: '#E76453',\n\t trackColor: '#EAEAEB',\n\t scaleColor: '',\n\t lineWidth: 8,\n\t size: 130,\n\t onStep: function(from, to, percent) { {\n\t\t jQuery(this.el).find('.percent').text(Math.round(percent));\n\t } \n\t } }); \n\t }, {\n\t\t\t  triggerOnce: true,\n\t\t\t  offset: 'bottom-in-view'\n\t\t\t});\n\t}); \n<\/script><\/p>\n<\/div>\n<\/div>\n<p><\/p>\n<div class=\"one_fourth\">\n<div class=\"one_fourth_inner content-inner left\" style=\"margin:0;width:90%;\"><\/p>\n<div class=\"tm_piechart column4\">\n<div class=\"chart_top\"><span class=\"chart_yt tmchat_wrapper animated\" data-percent=\"85\"><span class=\"percent\" style=\"color:#E76453;\"><\/span><\/span><\/div>\n<div class=\"chart_bottom\">\n<h2 class=\"chart_title\">Nunc molestie<\/h2>\n<div class=\"chart_desc\">Nunc molestie dolor nec magna fermen atum in pharetra orci mollis. Nam tempor diam elit fermen atum in pharetra orci mollis.<\/div>\n<\/div>\n<\/div>\n<p><script type='text\/javascript'>\n\t jQuery(function() {\n\t jQuery('.chart_yt').waypoint(function() {\n\t jQuery(this).easyPieChart({\n\t easing:'easeOutBounce',\n\t animate: {duration: 2000, enabled: true},\n\t barColor: '#E76453',\n\t trackColor: '#EAEAEB',\n\t scaleColor: '',\n\t lineWidth: 8,\n\t size: 130,\n\t onStep: function(from, to, percent) { {\n\t\t jQuery(this.el).find('.percent').text(Math.round(percent));\n\t } \n\t } }); \n\t }, {\n\t\t\t  triggerOnce: true,\n\t\t\t  offset: 'bottom-in-view'\n\t\t\t});\n\t}); \n<\/script><\/p>\n<\/div>\n<\/div>\n<p><\/p>\n<div class=\"one_fourth\">\n<div class=\"one_fourth_inner content-inner left\" style=\"margin:0;width:90%;\"><\/p>\n<div class=\"tm_piechart column4\">\n<div class=\"chart_top\"><span class=\"chart_lm tmchat_wrapper animated\" data-percent=\"15\"><span class=\"percent\" style=\"color:#E76453;\"><\/span><\/span><\/div>\n<div class=\"chart_bottom\">\n<h2 class=\"chart_title\">Magna fermen<\/h2>\n<div class=\"chart_desc\">Nunc molestie dolor nec magna fermen atum in pharetra orci mollis. Nam tempor diam elit fermen atum in pharetra orci mollis.<\/div>\n<\/div>\n<\/div>\n<p><script type='text\/javascript'>\n\t jQuery(function() {\n\t jQuery('.chart_lm').waypoint(function() {\n\t jQuery(this).easyPieChart({\n\t easing:'easeOutBounce',\n\t animate: {duration: 2000, enabled: true},\n\t barColor: '#E76453',\n\t trackColor: '#EAEAEB',\n\t scaleColor: '',\n\t lineWidth: 8,\n\t size: 130,\n\t onStep: function(from, to, percent) { {\n\t\t jQuery(this.el).find('.percent').text(Math.round(percent));\n\t } \n\t } }); \n\t }, {\n\t\t\t  triggerOnce: true,\n\t\t\t  offset: 'bottom-in-view'\n\t\t\t});\n\t}); \n<\/script><\/p>\n<\/div>\n<\/div>\n<p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Progressbar Code Progress bar [ progressbar][ tm_progressbar color=&#8221;FFFFFF&#8221; background_color=&#8221;E76453&#8243; value=&#8221;80&#8243; show_percentage=&#8221;yes | no&#8221; style=&#8221;1 | 2 | 3 &#8220;] Web Development [ \/tm_progressbar ][ \/progressbar ] Progressbar Style One Web Development80% Marketing &amp; PR 64% Web Designing 70% Consulting 45% Style Two Web Development Marketing &amp; PR Web Designing Consulting Style Three Web Development 80% Marketing &amp; PR 64% Web Designing 70% Consulting 45% Style Four Web Development 80% Marketing &amp; PR 64% Web Designing 70% Consulting 45% Piechart Code Pie Chart [ tm_piechart background_color=&#8221;#E76453&#8243; percentage=&#8221;15&#8243; title=&#8221;Praesent magna&#8221;] CONTENTS [ \/tm_piechart ] Pie Chart Praesent magna Nunc molestie dolor nec magna fermen atum in pharetra orci mollis. Nam tempor diam elit fermen atum in pharetra orci mollis. Conse viverra Nunc molestie dolor nec magna fermen atum in pharetra orci mollis. Nam tempor diam elit fermen atum in pharetra orci mollis. Nunc molestie Nunc molestie dolor nec magna fermen atum in pharetra orci mollis. Nam tempor diam elit fermen atum in pharetra orci mollis. Magna fermen Nunc molestie dolor nec magna fermen atum in pharetra orci mollis. Nam tempor diam elit fermen atum in pharetra orci mollis.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2712,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"_mi_skip_tracking":false},"_links":{"self":[{"href":"https:\/\/www.gioiellibaravelli.it\/wp-json\/wp\/v2\/pages\/2716"}],"collection":[{"href":"https:\/\/www.gioiellibaravelli.it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.gioiellibaravelli.it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.gioiellibaravelli.it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gioiellibaravelli.it\/wp-json\/wp\/v2\/comments?post=2716"}],"version-history":[{"count":0,"href":"https:\/\/www.gioiellibaravelli.it\/wp-json\/wp\/v2\/pages\/2716\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.gioiellibaravelli.it\/wp-json\/wp\/v2\/pages\/2712"}],"wp:attachment":[{"href":"https:\/\/www.gioiellibaravelli.it\/wp-json\/wp\/v2\/media?parent=2716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}