{"id":2588,"date":"2014-04-27T16:55:36","date_gmt":"2014-04-27T14:55:36","guid":{"rendered":"http:\/\/hb-themes.com\/themes\/highend_wp\/?page_id=2588"},"modified":"2014-04-27T16:55:36","modified_gmt":"2014-04-27T14:55:36","slug":"circle-charts-and-skill-bars","status":"publish","type":"page","link":"https:\/\/turnkeylawfirm.com\/demo\/circle-charts-and-skill-bars\/","title":{"rendered":"Circle Charts &#038; Skill Bars"},"content":{"rendered":"<div class=\"shortcode-wrapper shortcode-title clearfix\"><h4 class=\"hb-heading \"><span>Circle Charts<\/span><\/h4><\/div>\n<div class=\"row clearfix\">\n<div class=\"col-4 \">\n<div class=\"shortcode-wrapper shortcode-circle-chart clearfix hb-animate-element hb-top-to-bottom\"><div class=\"hb-chart\" data-percent=\"60\" data-barColor=\"#c0392b\" data-trackColor=\"#e1e1e1\" data-lineWidth=\"3\" data-barSize=\"220\" data-animation-speed=\"300\"><i style=\"line-height:220px; font-size:43px\" class=\"hb-moon-meter-fast\"><\/i><\/div><div class=\"hb-chart-desc\">60% Faster<\/div><\/div>\n<\/div>\n<div class=\"col-4 \">\n<div class=\"shortcode-wrapper shortcode-circle-chart clearfix hb-animate-element hb-top-to-bottom\"><div class=\"hb-chart\" data-percent=\"80\" data-barColor=\"#2c3e50\" data-trackColor=\"#e1e1e1\" data-lineWidth=\"3\" data-barSize=\"220\" data-animation-speed=\"600\"><i style=\"line-height:220px; font-size:43px\" class=\"hb-moon-cogs\"><\/i><\/div><div class=\"hb-chart-desc\">80% More Powerful<\/div><\/div>\n<\/div>\n<div class=\"col-4 \">\n<div class=\"shortcode-wrapper shortcode-circle-chart clearfix hb-animate-element hb-top-to-bottom\"><div class=\"hb-chart\" data-percent=\"90\" data-barColor=\"#336699\" data-trackColor=\"#e1e1e1\" data-lineWidth=\"3\" data-barSize=\"220\" data-animation-speed=\"1200\"><i style=\"line-height:220px; font-size:43px\" class=\"hb-moon-quill-2\"><\/i><\/div><div class=\"hb-chart-desc\">90% Lighter<\/div><\/div>\n<\/div>\n<\/div>\n<div class=\"shortcode-wrapper shortcode-spacer clearfix\"><div class=\"spacer\"><\/div><\/div>\n<div class=\"row clearfix\">\n<div class=\"col-4 \">\n<div class=\"shortcode-wrapper shortcode-circle-chart clearfix hb-animate-element hb-top-to-bottom\"><div class=\"hb-chart\" data-percent=\"80\" data-barColor=\"#2c3e50\" data-trackColor=\"#e1e1e1\" data-lineWidth=\"8\" data-barSize=\"220\" data-animation-speed=\"600\"><div class=\"chart-percent\"><span>80<\/span>%<\/div><\/div><div class=\"hb-chart-desc\">With Percents<\/div><\/div>\n<\/div>\n<div class=\"col-4 \">\n<div class=\"shortcode-wrapper shortcode-circle-chart clearfix hb-animate-element hb-top-to-bottom\"><div class=\"hb-chart\" data-percent=\"50\" data-barColor=\"#8e44ad\" data-trackColor=\"#e1e1e1\" data-lineWidth=\"3\" data-barSize=\"220\" data-animation-speed=\"900\"><span class=\"chart-custom-text\">Text?<\/span><\/div><div class=\"hb-chart-desc\">Yes! Use Text<\/div><\/div>\n<\/div>\n<div class=\"col-4 \">\n<div class=\"shortcode-wrapper shortcode-circle-chart clearfix hb-animate-element hb-top-to-bottom\"><div class=\"hb-chart\" data-percent=\"75\" data-barColor=\"#8e44ad\" data-trackColor=\"#e1e1e1\" data-lineWidth=\"1\" data-barSize=\"220\" data-animation-speed=\"900\"><i style=\"line-height:220px; font-size:43px\" class=\"hb-moon-health\"><\/i><\/div><div class=\"hb-chart-desc\">Line Weight<\/div><\/div>\n<\/div>\n<\/div>\n<div class=\"shortcode-wrapper shortcode-spacer clearfix\"><div class=\"spacer\" style=\"height:50px;\"><\/div><\/div>\n<div class=\"shortcode-wrapper shortcode-title clearfix\"><h4 class=\"hb-heading \"><span>Skill Bars<\/span><\/h4><\/div>\n<div class=\"shortcode-wrapper shortcode-spacer clearfix\"><div class=\"spacer\" style=\"height:30px;\"><\/div><\/div>\n<div class=\"row clearfix\">\n<div class=\"col-6 \">\n\n\t\t\t<div class=\"hb-skill-meter\">\n\t\t\t\t<div class=\"hb-skill-meter-title\">\n\t\t\t\t\t<span class=\"bar-title\"> WordPress<\/span>\n\t\t\t\t\t<span class=\"progress-value\"\"><span class=\"value\">90<\/span> %<\/span>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"hb-progress-bar\">\n\t\t\t\t\t<span class=\"progress-outer\" data-width=\"90\">\n\t\t\t\t\t\t<span class=\"progress-inner\"><\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\n\t\t\t<div class=\"hb-skill-meter\">\n\t\t\t\t<div class=\"hb-skill-meter-title\">\n\t\t\t\t\t<span class=\"bar-title\"> PHP<\/span>\n\t\t\t\t\t<span class=\"progress-value\"\"><span class=\"value\">80<\/span> %<\/span>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"hb-progress-bar\">\n\t\t\t\t\t<span class=\"progress-outer\" data-width=\"80\">\n\t\t\t\t\t\t<span class=\"progress-inner\"><\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\n\t\t\t<div class=\"hb-skill-meter\">\n\t\t\t\t<div class=\"hb-skill-meter-title\">\n\t\t\t\t\t<span class=\"bar-title\"> Java<\/span>\n\t\t\t\t\t<span class=\"progress-value\"\"><span class=\"value\">70<\/span> %<\/span>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"hb-progress-bar\">\n\t\t\t\t\t<span class=\"progress-outer\" data-width=\"70\">\n\t\t\t\t\t\t<span class=\"progress-inner\"><\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\n\t\t\t<div class=\"hb-skill-meter\">\n\t\t\t\t<div class=\"hb-skill-meter-title\">\n\t\t\t\t\t<span class=\"bar-title\"> Ruby<\/span>\n\t\t\t\t\t<span class=\"progress-value\"\"><span class=\"value\">60<\/span> %<\/span>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"hb-progress-bar\">\n\t\t\t\t\t<span class=\"progress-outer\" data-width=\"60\">\n\t\t\t\t\t\t<span class=\"progress-inner\"><\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\n\t\t\t<div class=\"hb-skill-meter\">\n\t\t\t\t<div class=\"hb-skill-meter-title\">\n\t\t\t\t\t<span class=\"bar-title\"> Python<\/span>\n\t\t\t\t\t<span class=\"progress-value\"\"><span class=\"value\">50<\/span> %<\/span>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"hb-progress-bar\">\n\t\t\t\t\t<span class=\"progress-outer\" data-width=\"50\">\n\t\t\t\t\t\t<span class=\"progress-inner\"><\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"col-6 \">\n\n\t\t\t<div class=\"hb-skill-meter\">\n\t\t\t\t<div class=\"hb-skill-meter-title\">\n\t\t\t\t\t<span class=\"bar-title\"> WordPress<\/span>\n\t\t\t\t\t<span class=\"progress-value\" style=\"color:#2980b9;\"\"><span class=\"value\">75<\/span> %<\/span>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"hb-progress-bar\">\n\t\t\t\t\t<span class=\"progress-outer\" data-width=\"75\">\n\t\t\t\t\t\t<span class=\"progress-inner\" style=\"background-color:#2980b9;\"><\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\n\t\t\t<div class=\"hb-skill-meter\">\n\t\t\t\t<div class=\"hb-skill-meter-title\">\n\t\t\t\t\t<span class=\"bar-title\"> PHP<\/span>\n\t\t\t\t\t<span class=\"progress-value\" style=\"color:#c0392b;\"\"><span class=\"value\">53<\/span> %<\/span>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"hb-progress-bar\">\n\t\t\t\t\t<span class=\"progress-outer\" data-width=\"53\">\n\t\t\t\t\t\t<span class=\"progress-inner\" style=\"background-color:#c0392b;\"><\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\n\t\t\t<div class=\"hb-skill-meter\">\n\t\t\t\t<div class=\"hb-skill-meter-title\">\n\t\t\t\t\t<span class=\"bar-title\"> Java<\/span>\n\t\t\t\t\t<span class=\"progress-value\" style=\"color:#d35400;\"\"><span class=\"value\">66<\/span> %<\/span>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"hb-progress-bar\">\n\t\t\t\t\t<span class=\"progress-outer\" data-width=\"66\">\n\t\t\t\t\t\t<span class=\"progress-inner\" style=\"background-color:#d35400;\"><\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\n\t\t\t<div class=\"hb-skill-meter\">\n\t\t\t\t<div class=\"hb-skill-meter-title\">\n\t\t\t\t\t<span class=\"bar-title\"> Ruby<\/span>\n\t\t\t\t\t<span class=\"progress-value\" style=\"color:#8e44ad;\"\"><span class=\"value\">95<\/span> %<\/span>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"hb-progress-bar\">\n\t\t\t\t\t<span class=\"progress-outer\" data-width=\"95\">\n\t\t\t\t\t\t<span class=\"progress-inner\" style=\"background-color:#8e44ad;\"><\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\n\t\t\t<div class=\"hb-skill-meter\">\n\t\t\t\t<div class=\"hb-skill-meter-title\">\n\t\t\t\t\t<span class=\"bar-title\"> Python<\/span>\n\t\t\t\t\t<span class=\"progress-value\" style=\"color:#27ae60;\"\"><span class=\"value\">40<\/span> %<\/span>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"hb-progress-bar\">\n\t\t\t\t\t<span class=\"progress-outer\" data-width=\"40\">\n\t\t\t\t\t\t<span class=\"progress-inner\" style=\"background-color:#27ae60;\"><\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n<\/div>\n<\/div>\n<div class=\"shortcode-wrapper shortcode-spacer clearfix\"><div class=\"spacer\" style=\"height:50px;\"><\/div><\/div>\n<div class=\"shortcode-wrapper shortcode-title clearfix\"><h4 class=\"hb-heading \"><span>Get the code<\/span><\/h4><\/div>\n<div class=\"shortcode-wrapper shortcode-title clearfix\"><h6 class=\"hb-subtitle-small \">Paste in Text Editor<\/h6><\/div>\n<div class=\"shortcode-wrapper shortcode-content-box clearfix pre-text\"><div class=\"hb-box-cont\" style=\"background-color: #FFFFFF\"><div class=\"hb-box-cont-body\">\n<p>&#091;circle_chart type=&#8221;with-icon&#8221; color=&#8221;#c0392b&#8221; track_color=&#8221;#e1e1e1&#8243; weight=&#8221;3&#8243; icon=&#8221;hb-moon-meter-fast&#8221; percent=&#8221;60&#8243; caption=&#8221;60% Faster&#8221; animation_speed=&#8221;300&#8243; animation=&#8221;top-to-bottom&#8221;&#093;<\/p>\n<p>&#091;skill number=&#8221;75&#8243; char=&#8221;%&#8221; caption=&#8221;WordPress&#8221; color=&#8221;#2980b9&#8243;&#093;<\/p>\n<\/div><\/div><\/div>\n<div class=\"shortcode-wrapper shortcode-infomessage clearfix\"><div class=\"hb-notif-box info\" ><div class=\"message-text\"><p><i class='icon-lightbulb'><\/i>1. You can also use these shortcodes as <strong>Visual Composer<\/strong> Drag &amp; Drop elements.<br \/>\nIf you prefer shortcodes, you can generate them using <strong>Shortcode Generator<\/strong>.<\/p>\n<p>&nbsp;<\/p>\n<p>2. Visit Theme Documentation for available arguments and more information. <a href=\"http:\/\/documentation.hb-themes.com\/highend\/#shortcodes\" target=\"_blank\" rel=\"noopener\">View Documentation Now.<\/a><br \/>\n<\/p><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"Circle Charts 60% Faster 80% More Powerful 90% Lighter 80%With Percents Text?Yes! Use Text Line Weight Skill Bars WordPress 80 % Java 60 % Python 75 % PHP 66 % Ruby 40 % Get the code Paste in Text Editor &#091;circle_chart type=\"with-icon\" color=\"#c0392b\" track_color=\"#e1e1e1\" weight=\"3\" icon=\"hb-moon-meter-fast\" percent=\"60\" caption=\"60% Faster\" animation_speed=\"300\" animation=\"top-to-bottom\"&#093; &#091;skill number=\"75\" char=\"%\" caption=\"WordPress\" [...]","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-2588","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/turnkeylawfirm.com\/demo\/wp-json\/wp\/v2\/pages\/2588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/turnkeylawfirm.com\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/turnkeylawfirm.com\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/turnkeylawfirm.com\/demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/turnkeylawfirm.com\/demo\/wp-json\/wp\/v2\/comments?post=2588"}],"version-history":[{"count":0,"href":"https:\/\/turnkeylawfirm.com\/demo\/wp-json\/wp\/v2\/pages\/2588\/revisions"}],"wp:attachment":[{"href":"https:\/\/turnkeylawfirm.com\/demo\/wp-json\/wp\/v2\/media?parent=2588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}