{"id":494,"date":"2013-07-26T07:43:22","date_gmt":"2013-07-26T07:43:22","guid":{"rendered":"http:\/\/www.aivahthemes.com\/hostmev2\/?page_id=494"},"modified":"2018-01-24T12:38:19","modified_gmt":"2018-01-24T12:38:19","slug":"progress-bar","status":"publish","type":"page","link":"https:\/\/www.aivahthemes.com\/hostmev2\/shortcodes\/progress-bar\/","title":{"rendered":"Progress Bar &amp; Chart"},"content":{"rendered":"<div class=\"fancyheading \"><h4 class=\"fancy-title \" >Progress Chart Circle<\/h4><span class=\"iva-fh-desc\" ><\/span><\/div>\n<div class=\"demo_space\"  style=\"height:10px\"><\/div>\n<div  class=\"CircleBarWrap\">\n<div class=\"chart\"><div data-percent=\"60\" class=\"CircleBar\"  data-bar-color=\"#16a085\"  data-size=\"150\"  data-line-width=\"7\"  data-percent=\"60\"  data-track-color=\"#dcfaf4\"><span><i style=\"\" class=\"fa fa-thumbs-up 32px\"><\/i><\/span><\/div><div class=\"label\">Custom Icon<\/div><\/div>\n<div class=\"chart\"><div data-percent=\"75\" class=\"CircleBar\"  data-bar-color=\"#d35400\"  data-size=\"150\"  data-line-width=\"7\"  data-percent=\"75\"  data-track-color=\"#ffe4d3\"><span>75%<\/span><\/div><div class=\"label\">Percentage<\/div><\/div>\n<div class=\"chart\"><div data-percent=\"80\" class=\"CircleBar\"  data-bar-color=\"#2980b9\"  data-size=\"150\"  data-line-width=\"7\"  data-percent=\"80\"  data-track-color=\"#d9ebf7\"><span>Custom Text<\/span><\/div><div class=\"label\">Custom Text<\/div><\/div>\n<div class=\"chart\"><div data-percent=\"80\" class=\"CircleBar\"  data-bar-color=\"#2c3e50\"  data-size=\"150\"  data-line-width=\"7\"  data-percent=\"80\"  data-track-color=\"#e1e8ef\"><span>8\/10<\/span><\/div><div class=\"label\">Ratings<\/div><\/div>\n<\/div><div style=\"clear:both;\"><\/div>\n<div class=\"divider  thin\"  style=\"border-color:#d6d6d6;margin:60px 0;\"><\/div>\n<div class=\"fancyheading \"><h4 class=\"fancy-title \" >Progress Chart Circle Any Size, Any Color and Any Thickness.<\/h4><span class=\"iva-fh-desc\" ><\/span><\/div>\n<div class=\"demo_space\"  style=\"height:10px\"><\/div>\n<div class=\"iva_col one_half\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas hendrerit ornare viverra. Nunc gravida placerat sapien, vitae egestas est malesuada vitae. Sed quis eleifend velit. Fusce adipiscing urna sed elementum consectetur. Sed non ante mauris. Quisque adipiscing orci sit amet velit semper aliquet. Pellentesque aliquam enim ligula, eget mollis mi blandit non. Ut ut purus lacinia nibh dapibus iaculis.<\/p>\n<p>Vivamus non lacus vel tellus viverra gravida. Aenean condimentum ligula id justo lacinia dignissim. Donec tincidunt vel diam quis luctus. Nunc ullamcorper tortor et tortor euismod, hendrerit laoreet metus venenatis. Praesent iaculis mauris ante, non fermentum dui tempor vitae. Mauris bibendum nisl in urna laoreet tincidunt. Nulla auctor at risus id varius. Cras sollicitudin nisi eu metus interdum, id sollicitudin metus tempor. Curabitur eget elit auctor, rutrum nibh non, malesuada dui.<br \/><\/div>\n<div class=\"iva_col one_half last\"><div  class=\"CircleBarWrap\">\n<div class=\"chart\"><div data-percent=\"75\" class=\"CircleBar\"  data-bar-color=\"#d35400\"  data-size=\"250\"  data-line-width=\"15\"  data-percent=\"75\"  data-track-color=\"#ffe4d3\"><span>75%<\/span><\/div><div class=\"label\">Chart With Percentage<\/div><\/div>\n<\/div><div style=\"clear:both;\"><\/div><\/div><div class=\"clear\"><\/div>\n<div class=\"divider  thin\"  style=\"margin:60px 0 40px 0;\"><\/div>\n<strong>Get The Code:<\/strong><br \/>\n<div class=\"demo_space\"  style=\"height:20px\"><\/div>\n<code>&#091;progresscircle]\n&#091;progress title=\"Chart With Custom Icon\" percent=\"60\" color=\"#16a085\"  trackcolor=\"#dcfaf4\"  size=\"200\" linewidth=\"7\"]&#091;icons style=\"normal\" size=\"32px\" icon=\"icon-thumbs-up\"]&#091;\/progress]\n&#091;progress title=\"Chart With Percentage\" percent=\"75\" color=\"#d35400\"  trackcolor=\"#ffe4d3\"  size=\"200\" linewidth=\"7\"]75%&#091;\/progress]\n&#091;progress title=\"Chart With Custom Text\" percent=\"80\" color=\"#2980b9\"  trackcolor=\"#d9ebf7\"  size=\"200\" linewidth=\"7\"]Custom Text&#091;\/progress]\n&#091;progress title=\"Chart With \u201cout of 10\u2033 rating\" percent=\"95\" color=\"#2c3e50\"  trackcolor=\"#e1e8ef\"  size=\"200\" linewidth=\"7\"]8\/10&#091;\/progress]\n[\/progresscircle]<\/code><br \/>\n<div class=\"divider  thin\"  style=\"margin:40px 0 40px 0;\"><\/div>\n<strong>Customization Options and Features:<\/strong><br \/>\n<div class=\"demo_space\"  style=\"height:20px\"><\/div>\n\n<ul class=\"list-square  black\">\n<li><strong>Title: <\/strong>Title text for outside the circle.<\/li>\n<li><strong>Percent:<\/strong> Type the percentage for circle.<\/li>\n<li><strong>Bar Color:<\/strong> Use color for the circle bar. <\/li>\n<li><strong>Track Color:<\/strong> Use color for the circle track bar. <\/li>\n<li><strong>Size:<\/strong> Enter size of the circle.<\/li>\n<li><strong>Thickness:<\/strong> Enter size for thickness of the circle.<\/li>\n<li><strong>Content:<\/strong> Enter text to display in the circle.<\/li>\n<\/ul>\n\n<div class=\"divider  thin\"  style=\"border-color:#d6d6d6;margin:60px 0;\"><\/div>\n<div class=\"fancyheading \"><h4 class=\"fancy-title \" >Progress Bar<\/h4><span class=\"iva-fh-desc\" ><\/span><\/div>\n<div class=\"demo_space\"  style=\"height:10px\"><\/div>\n<div  class=\"progress_wrap\" ><h4>Photoshop<\/h4><div class=\"progress_container\"  style=\"background-color:#dcfaf4;\"><div  data_width=\"85%\" class=\"progress_bar\"  style=\"background-color:#16a085;\"><span class=\"percentage\">85%<\/span><\/div><\/div><\/div>\n<div  class=\"progress_wrap\" ><h4>Illustration<\/h4><div class=\"progress_container\"  style=\"background-color:#dcfaf4;\"><div  data_width=\"65%\" class=\"progress_bar\"  style=\"background-color:#16a085;\"><span class=\"percentage\">65%<\/span><\/div><\/div><\/div>\n<div  class=\"progress_wrap\" ><h4>HTML5<\/h4><div class=\"progress_container\"  style=\"background-color:#dcfaf4;\"><div  data_width=\"95%\" class=\"progress_bar\"  style=\"background-color:#16a085;\"><span class=\"percentage\">95%<\/span><\/div><\/div><\/div>\n<div  class=\"progress_wrap\" ><h4>WordPress<\/h4><div class=\"progress_container\"  style=\"background-color:#dcfaf4;\"><div  data_width=\"90%\" class=\"progress_bar\"  style=\"background-color:#16a085;\"><span class=\"percentage\">90%<\/span><\/div><\/div><\/div>\n<div  class=\"progress_wrap\" ><h4>After Effects<\/h4><div class=\"progress_container\"  style=\"background-color:#dcfaf4;\"><div  data_width=\"70%\" class=\"progress_bar\"  style=\"background-color:#16a085;\"><span class=\"percentage\">70%<\/span><\/div><\/div><\/div>\n<div  class=\"progress_wrap\" ><h4>Javascript<\/h4><div class=\"progress_container\"  style=\"background-color:#dcfaf4;\"><div  data_width=\"85%\" class=\"progress_bar\"  style=\"background-color:#16a085;\"><span class=\"percentage\">85%<\/span><\/div><\/div><\/div>\n<div  class=\"progress_wrap\" ><h4>jQuery<\/h4><div class=\"progress_container\"  style=\"background-color:#dcfaf4;\"><div  data_width=\"95%\" class=\"progress_bar\"  style=\"background-color:#16a085;\"><span class=\"percentage\">95%<\/span><\/div><\/div><\/div>\n<div class=\"demo_space\"  style=\"height:30px\"><\/div>\n<div class=\"fancyheading \"><h4 class=\"fancy-title \" >Progress Bar <strong>With Different Colors<\/strong><\/h4><span class=\"iva-fh-desc\" ><\/span><\/div>\n<div class=\"demo_space\"  style=\"height:20px\"><\/div>\n<div  class=\"progress_wrap\" ><h4>Photoshop<\/h4><div class=\"progress_container\"  style=\"background-color:#dcfaf4;\"><div  data_width=\"85%\" class=\"progress_bar\"  style=\"background-color:#16a085;\"><span class=\"percentage\">85%<\/span><\/div><\/div><\/div>\n<div  class=\"progress_wrap\" ><h4>Illustration<\/h4><div class=\"progress_container\"  style=\"background-color:#dcf7e8;\"><div  data_width=\"65%\" class=\"progress_bar\"  style=\"background-color:#27ae60;\"><span class=\"percentage\">65%<\/span><\/div><\/div><\/div>\n<div  class=\"progress_wrap\" ><h4>HTML5<\/h4><div class=\"progress_container\"  style=\"background-color:#d9ebf7;\"><div  data_width=\"95%\" class=\"progress_bar\"  style=\"background-color:#2980b9;\"><span class=\"percentage\">95%<\/span><\/div><\/div><\/div>\n<div  class=\"progress_wrap\" ><h4>WordPress<\/h4><div class=\"progress_container\"  style=\"background-color:#ebdcf1;\"><div  data_width=\"90%\" class=\"progress_bar\"  style=\"background-color:#8e44ad;\"><span class=\"percentage\">90%<\/span><\/div><\/div><\/div>\n<div  class=\"progress_wrap\" ><h4>After Effects<\/h4><div class=\"progress_container\"  style=\"background-color:#e1e8ef;\"><div  data_width=\"70%\" class=\"progress_bar\"  style=\"background-color:#2c3e50;\"><span class=\"percentage\">70%<\/span><\/div><\/div><\/div>\n<div  class=\"progress_wrap\" ><h4>Javascript<\/h4><div class=\"progress_container\"  style=\"background-color:#fdedd4;\"><div  data_width=\"85%\" class=\"progress_bar\"  style=\"background-color:#f39c12;\"><span class=\"percentage\">85%<\/span><\/div><\/div><\/div>\n<div  class=\"progress_wrap\" ><h4>jQuery<\/h4><div class=\"progress_container\"  style=\"background-color:#f8e3e1;\"><div  data_width=\"95%\" class=\"progress_bar\"  style=\"background-color:#c0392b;\"><span class=\"percentage\">95%<\/span><\/div><\/div><\/div>\n<div class=\"divider  thin\"  style=\"margin:60px 0 40px 0;\"><\/div>\n<strong>Get The Code:<\/strong><br \/>\n<div class=\"demo_space\"  style=\"height:20px\"><\/div>\n<code>&#091;progressbar progress=\"85\" color=\"#16a085\" title=\"Photoshop\" bgcolor=\"#dcfaf4\"]<\/code><br \/>\n<div class=\"divider  thin\"  style=\"margin:40px 0 40px 0;\"><\/div>\n<strong>Customization Options and Features:<\/strong><br \/>\n<div class=\"demo_space\"  style=\"height:20px\"><\/div>\n\n<ul class=\"list-square  black\">\n<li><strong>Title: <\/strong>Title text for progress bar.<\/li>\n<li><strong>Percent:<\/strong> Type the percentage for progress.<\/li>\n<li><strong>Bar Color:<\/strong> Use color for the progress bar. <\/li>\n<li><strong>Track Color:<\/strong> Use color for the progress track bar. <\/li>\n<\/ul>\n\n<div class=\"demo_space\"  style=\"height:40px\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Get The Code: &#091;progresscircle] &#091;progress title=&#8221;Chart With Custom Icon&#8221; percent=&#8221;60&#8243; color=&#8221;#16a085&#8243; trackcolor=&#8221;#dcfaf4&#8243; size=&#8221;200&#8243; linewidth=&#8221;7&#8243;]&#091;icons style=&#8221;normal&#8221; size=&#8221;32px&#8221; icon=&#8221;icon-thumbs-up&#8221;]&#091;\/progress] &#091;progress title=&#8221;Chart With Percentage&#8221; percent=&#8221;75&#8243; color=&#8221;#d35400&#8243; trackcolor=&#8221;#ffe4d3&#8243; size=&#8221;200&#8243; linewidth=&#8221;7&#8243;]75%&#091;\/progress] &#091;progress title=&#8221;Chart With Custom Text&#8221; percent=&#8221;80&#8243; color=&#8221;#2980b9&#8243; trackcolor=&#8221;#d9ebf7&#8243; size=&#8221;200&#8243; linewidth=&#8221;7&#8243;]Custom Text&#091;\/progress] &#091;progress title=&#8221;Chart With \u201cout of 10\u2033 rating&#8221; percent=&#8221;95&#8243; color=&#8221;#2c3e50&#8243; trackcolor=&#8221;#e1e8ef&#8221; size=&#8221;200&#8243; linewidth=&#8221;7&#8243;]8\/10&#091;\/progress] [\/progresscircle] Customization Options and Features: Get [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":246,"menu_order":0,"comment_status":"open","ping_status":"open","template":"template_subpage.php","meta":{"footnotes":""},"class_list":{"0":"post-494","1":"page","2":"type-page","3":"status-publish","5":"last-post"},"_links":{"self":[{"href":"https:\/\/www.aivahthemes.com\/hostmev2\/wp-json\/wp\/v2\/pages\/494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aivahthemes.com\/hostmev2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.aivahthemes.com\/hostmev2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.aivahthemes.com\/hostmev2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aivahthemes.com\/hostmev2\/wp-json\/wp\/v2\/comments?post=494"}],"version-history":[{"count":3,"href":"https:\/\/www.aivahthemes.com\/hostmev2\/wp-json\/wp\/v2\/pages\/494\/revisions"}],"predecessor-version":[{"id":2036,"href":"https:\/\/www.aivahthemes.com\/hostmev2\/wp-json\/wp\/v2\/pages\/494\/revisions\/2036"}],"up":[{"embeddable":true,"href":"https:\/\/www.aivahthemes.com\/hostmev2\/wp-json\/wp\/v2\/pages\/246"}],"wp:attachment":[{"href":"https:\/\/www.aivahthemes.com\/hostmev2\/wp-json\/wp\/v2\/media?parent=494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}