{"id":52,"date":"2015-05-21T17:55:13","date_gmt":"2015-05-21T17:55:13","guid":{"rendered":"http:\/\/wp-demo.indonez.com\/Enix\/?page_id=52"},"modified":"2015-05-21T17:55:13","modified_gmt":"2015-05-21T17:55:13","slug":"alert-progress","status":"publish","type":"page","link":"https:\/\/gulfcandlecompany.com\/index.php\/alert-progress\/","title":{"rendered":"Progress Bar"},"content":{"rendered":"<div class=\"large-12  column \"  >\n<pre class=\"indonez_code\"><div class=\"alert-box \"><i class=\"fa fa-question-circle\"><\/i>content...<a data-component=\"alert\" href=\"#\" class=\"close\">\u00d7<\/a><\/div><\/pre>\n<div class=\"idz-panel \">\n<p><strong>type<\/strong> : default | info | success | warning | error<\/p>\n<\/div>\n<h3 class=\"gap \" >Example of Alert Box<\/h3>\n<div class=\"alert-box \"><i class=\"fa fa-question-circle\"><\/i>This is default alert message<a data-component=\"alert\" href=\"#\" class=\"close\">\u00d7<\/a><\/div>\n<div class=\"alert-box blue\"><i class=\"fa fa-info-circle\"><\/i>This is information alert message<a data-component=\"alert\" href=\"#\" class=\"close\">\u00d7<\/a><\/div>\n<div class=\"alert-box green\"><i class=\"fa fa-check-circle\"><\/i>This is success alert message<a data-component=\"alert\" href=\"#\" class=\"close\">\u00d7<\/a><\/div>\n<div class=\"alert-box \"><i class=\"fa fa-question-circle\"><\/i>This is warning alert message<a data-component=\"alert\" href=\"#\" class=\"close\">\u00d7<\/a><\/div>\n<div class=\"alert-box red\"><i class=\"fa fa-times-circle\"><\/i>This is error alert message<a data-component=\"alert\" href=\"#\" class=\"close\">\u00d7<\/a><\/div>\n<\/div>\n<div class=\"spacer \" style=\"height:10px;  background:\">&nbsp;<\/div>\n<div class=\"spacer \" style=\"height:10px;  background:\">&nbsp;<\/div>\n<div class=\"spacer \" style=\"height:3px;  background:#dedede\">&nbsp;<\/div>\n<div class=\"spacer \" style=\"height:10px;  background:\">&nbsp;<\/div>\n<div class=\"large-12  column \"  >\n<pre class=\"indonez_code\"><div class=\"progress-bar-wrapper\"><span class=\"progress-title\">title text<\/span><span class=\"progress-meter\">%<\/span><div id=\"title-text-bar\" class=\"ui-progress-bar ui-container\"><div class=\"ui-progress green\"><\/div><\/div><\/div><div><script type=\"text\/javascript\">\r\n\tjQuery(document).ready(function($) {\r\n\t$(\"#title-text-bar .ui-progress .ui-label\").hide();\r\n\t$(\"#title-text-bar .ui-progress\").css(\"width\", \"7%\");\r\n\t$(\"#title-text-bar .ui-progress\").animateProgress(, function() {});\r\n\t});\r\n\t<\/script><\/div><\/pre>\n<p><strong>title<\/strong> : title text<br \/>\n<strong>color<\/strong> : green | blue | orange | yellow | red | grey<br \/>\n<strong>type<\/strong> : default | circle<br \/>\n<strong>value<\/strong> : add number value to show percentage in progress bar<\/p>\n<\/div>\n<div class=\"large-12 text-center column \"  >\n<h3 class=\" firstword-bold \" >Eof Circular progress bar<\/h3>\n<\/div>\n<div class=\"large-4 large-4 medium-4 text-center column \"  >\n<div class=\"chart-container\">\n<div class=\"chart-\" data-percent=70><\/div>\n<p>Default Color<\/p>\n<\/div>\n<div><script type=\"text\/javascript\">\n\tjQuery(document).ready(function($) {\n\t\t$(\".chart-\").responsivePieChart({\n            barColor    : \"#169fe6\",\n            trackColor  : \"#f1f1f1\",\n            lineCap     : \"round\",\n            fontColor   : \"inherit\",\n\t\t});\t\n\t});\n\t<\/script><\/div>\n<\/div>\n<div class=\"large-4 medium-4 text-center column \"  >\n<div class=\"chart-container\">\n<div class=\"chart-green\" data-percent=90><\/div>\n<p>Green Color<\/p>\n<\/div>\n<div><script type=\"text\/javascript\">\n\tjQuery(document).ready(function($) {\n\t\t$(\".chart-green\").responsivePieChart({\n            barColor    : \"#87B822\",\n            trackColor  : \"#f1f1f1\",\n            lineCap     : \"round\",\n            fontColor   : \"inherit\",\n\t\t});\t\n\t});\n\t<\/script><\/div>\n<\/div>\n<div class=\"large-4 medium-4 text-center column \"  >\n<div class=\"chart-container\">\n<div class=\"chart-blue\" data-percent=80><\/div>\n<p>Blue Color<\/p>\n<\/div>\n<div><script type=\"text\/javascript\">\n\tjQuery(document).ready(function($) {\n\t\t$(\".chart-blue\").responsivePieChart({\n            barColor    : \"#169fe6\",\n            trackColor  : \"#f1f1f1\",\n            lineCap     : \"round\",\n            fontColor   : \"inherit\",\n\t\t});\t\n\t});\n\t<\/script><\/div>\n<\/div>\n<div class=\"large-4 medium-4 text-center column \"  >\n<div class=\"chart-container\">\n<div class=\"chart-red\" data-percent=60><\/div>\n<p>Red Color<\/p>\n<\/div>\n<div><script type=\"text\/javascript\">\n\tjQuery(document).ready(function($) {\n\t\t$(\".chart-red\").responsivePieChart({\n            barColor    : \"#E75B4C\",\n            trackColor  : \"#f1f1f1\",\n            lineCap     : \"round\",\n            fontColor   : \"inherit\",\n\t\t});\t\n\t});\n\t<\/script><\/div>\n<\/div>\n<div class=\"large-4 medium-4 text-center column \"  >\n<div class=\"chart-container\">\n<div class=\"chart-yellow\" data-percent=70><\/div>\n<p>Yellow Color<\/p>\n<\/div>\n<div><script type=\"text\/javascript\">\n\tjQuery(document).ready(function($) {\n\t\t$(\".chart-yellow\").responsivePieChart({\n            barColor    : \"#F0C42C\",\n            trackColor  : \"#f1f1f1\",\n            lineCap     : \"round\",\n            fontColor   : \"inherit\",\n\t\t});\t\n\t});\n\t<\/script><\/div>\n<\/div>\n<div class=\"large-4 medium-4 text-center column \"  >\n<div class=\"chart-container\">\n<div class=\"chart-grey\" data-percent=40><\/div>\n<p>Grey Color<\/p>\n<\/div>\n<div><script type=\"text\/javascript\">\n\tjQuery(document).ready(function($) {\n\t\t$(\".chart-grey\").responsivePieChart({\n            barColor    : \"#7f8c8d\",\n            trackColor  : \"#f1f1f1\",\n            lineCap     : \"round\",\n            fontColor   : \"inherit\",\n\t\t});\t\n\t});\n\t<\/script><\/div>\n<\/div>\n<div class=\"spacer \" style=\"height:10px;  background:\">&nbsp;<\/div>\n<div class=\"spacer \" style=\"height:3px;  background:#dedede\">&nbsp;<\/div>\n<div class=\"spacer \" style=\"height:10px;  background:\">&nbsp;<\/div>\n<div class=\"large-12  column \"  >\n<h3 class=\" firstword-bold \" >Example Progress Bar<\/h3>\n<div class=\"progress-bar-wrapper\"><span class=\"progress-title\">Progress bar grey<\/span><span class=\"progress-meter\">100%<\/span><\/p>\n<div id=\"progress-bar-grey-bar\" class=\"ui-progress-bar ui-container\">\n<div class=\"ui-progress grey\"><\/div>\n<\/div>\n<\/div>\n<div><script type=\"text\/javascript\">\n\tjQuery(document).ready(function($) {\n\t$(\"#progress-bar-grey-bar .ui-progress .ui-label\").hide();\n\t$(\"#progress-bar-grey-bar .ui-progress\").css(\"width\", \"7%\");\n\t$(\"#progress-bar-grey-bar .ui-progress\").animateProgress(100, function() {});\n\t});\n\t<\/script><\/div>\n<div class=\"progress-bar-wrapper\"><span class=\"progress-title\">Progress bar green<\/span><span class=\"progress-meter\">90%<\/span><\/p>\n<div id=\"progress-bar-green-bar\" class=\"ui-progress-bar ui-container\">\n<div class=\"ui-progress green\"><\/div>\n<\/div>\n<\/div>\n<div><script type=\"text\/javascript\">\n\tjQuery(document).ready(function($) {\n\t$(\"#progress-bar-green-bar .ui-progress .ui-label\").hide();\n\t$(\"#progress-bar-green-bar .ui-progress\").css(\"width\", \"7%\");\n\t$(\"#progress-bar-green-bar .ui-progress\").animateProgress(90, function() {});\n\t});\n\t<\/script><\/div>\n<div class=\"progress-bar-wrapper\"><span class=\"progress-title\">Progress bar blue<\/span><span class=\"progress-meter\">75%<\/span><\/p>\n<div id=\"progress-bar-blue-bar\" class=\"ui-progress-bar ui-container\">\n<div class=\"ui-progress blue\"><\/div>\n<\/div>\n<\/div>\n<div><script type=\"text\/javascript\">\n\tjQuery(document).ready(function($) {\n\t$(\"#progress-bar-blue-bar .ui-progress .ui-label\").hide();\n\t$(\"#progress-bar-blue-bar .ui-progress\").css(\"width\", \"7%\");\n\t$(\"#progress-bar-blue-bar .ui-progress\").animateProgress(75, function() {});\n\t});\n\t<\/script><\/div>\n<div class=\"progress-bar-wrapper\"><span class=\"progress-title\">Progress bar orange<\/span><span class=\"progress-meter\">85%<\/span><\/p>\n<div id=\"progress-bar-orange-bar\" class=\"ui-progress-bar ui-container\">\n<div class=\"ui-progress orange\"><\/div>\n<\/div>\n<\/div>\n<div><script type=\"text\/javascript\">\n\tjQuery(document).ready(function($) {\n\t$(\"#progress-bar-orange-bar .ui-progress .ui-label\").hide();\n\t$(\"#progress-bar-orange-bar .ui-progress\").css(\"width\", \"7%\");\n\t$(\"#progress-bar-orange-bar .ui-progress\").animateProgress(85, function() {});\n\t});\n\t<\/script><\/div>\n<div class=\"progress-bar-wrapper\"><span class=\"progress-title\">Progress bar yellow<\/span><span class=\"progress-meter\">75%<\/span><\/p>\n<div id=\"progress-bar-yellow-bar\" class=\"ui-progress-bar ui-container\">\n<div class=\"ui-progress yellow\"><\/div>\n<\/div>\n<\/div>\n<div><script type=\"text\/javascript\">\n\tjQuery(document).ready(function($) {\n\t$(\"#progress-bar-yellow-bar .ui-progress .ui-label\").hide();\n\t$(\"#progress-bar-yellow-bar .ui-progress\").css(\"width\", \"7%\");\n\t$(\"#progress-bar-yellow-bar .ui-progress\").animateProgress(75, function() {});\n\t});\n\t<\/script><\/div>\n<div class=\"progress-bar-wrapper\"><span class=\"progress-title\">Progress bar red<\/span><span class=\"progress-meter\">70%<\/span><\/p>\n<div id=\"progress-bar-red-bar\" class=\"ui-progress-bar ui-container\">\n<div class=\"ui-progress red\"><\/div>\n<\/div>\n<\/div>\n<div><script type=\"text\/javascript\">\n\tjQuery(document).ready(function($) {\n\t$(\"#progress-bar-red-bar .ui-progress .ui-label\").hide();\n\t$(\"#progress-bar-red-bar .ui-progress\").css(\"width\", \"7%\");\n\t$(\"#progress-bar-red-bar .ui-progress\").animateProgress(70, function() {});\n\t});\n\t<\/script><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"[idz_alert type=\"default\"]content...[\/idz_alert] type : default | info | success | warning | error Example of Alert Box This is default alert message\u00d7 This is information alert message\u00d7 This is success alert message\u00d7 This is warning alert message\u00d7 This is error alert message\u00d7 &nbsp; &nbsp; &nbsp; &nbsp; [idz_progress_bar title=\"title text\" color=\"green\" type=\"default\" value=\"70\"\"] title : title [...]","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/gulfcandlecompany.com\/index.php\/wp-json\/wp\/v2\/pages\/52"}],"collection":[{"href":"https:\/\/gulfcandlecompany.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gulfcandlecompany.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gulfcandlecompany.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gulfcandlecompany.com\/index.php\/wp-json\/wp\/v2\/comments?post=52"}],"version-history":[{"count":0,"href":"https:\/\/gulfcandlecompany.com\/index.php\/wp-json\/wp\/v2\/pages\/52\/revisions"}],"wp:attachment":[{"href":"https:\/\/gulfcandlecompany.com\/index.php\/wp-json\/wp\/v2\/media?parent=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}