{"id":624,"date":"2016-08-03T10:44:24","date_gmt":"2016-08-03T10:44:24","guid":{"rendered":"http:\/\/main.arktheme.com\/?page_id=624"},"modified":"2023-11-13T17:34:37","modified_gmt":"2023-11-13T17:34:37","slug":"horizontal-progress-bar","status":"publish","type":"page","link":"https:\/\/durantlax.com\/index.php\/shortcodes\/infographics\/horizontal-progress-bar\/","title":{"rendered":"Horizontal Progress Bar"},"content":{"rendered":"<p><section class=\"ffb-id-h7lqa1q fg-section fg-el-has-bg fg-text-dark\"><span class=\"fg-bg\"><span data-fg-bg=\"{&quot;type&quot;:&quot;image&quot;,&quot;opacity&quot;:&quot;1&quot;,&quot;url&quot;:&quot;https:\\\/\\\/durantlax.com\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/17.jpg&quot;,&quot;size&quot;:&quot;cover&quot;,&quot;repeat&quot;:&quot;no-repeat&quot;,&quot;attachment&quot;:&quot;fixed&quot;,&quot;position&quot;:&quot;10% 100%&quot;}\" class=\"fg-bg-layer fg-bg-type-image \" style=\"opacity: 1; background-image: url(&quot;https:\/\/durantlax.com\/wp-content\/uploads\/2016\/08\/17.jpg&quot;); background-repeat: no-repeat; background-attachment: fixed; background-position: 10% 100%; background-size: cover;\"><\/span><span data-fg-bg=\"{&quot;type&quot;:&quot;color&quot;,&quot;opacity&quot;:1,&quot;color&quot;:&quot;rgba(53, 53, 61, 0.5)&quot;}\" class=\"fg-bg-layer fg-bg-type-color \" style=\"opacity: 1; background-color: rgba(53, 53, 61, 0.5);\"><\/span><\/span><div class=\"fg-container container fg-container-large fg-container-lvl--1 \"><div class=\"fg-row row    \" ><div class=\"ffb-id-h7lqa1r fg-col col-xs-12 col-xs-offset-0 col-xs-pull-0 col-xs-push-0 col-md-12 fg-text-dark\"><section class=\"ffb-id-h7lqsit breadcrumbs-v5 fg-el-has-bg fg-text-light\"><span class=\"fg-bg\"><span data-fg-bg=\"{&quot;type&quot;:&quot;color&quot;,&quot;opacity&quot;:1,&quot;color&quot;:&quot;&quot;}\" class=\"fg-bg-layer fg-bg-type-color \" style=\"opacity: 1; background-color: ;\"><\/span><\/span><h2 class=\"breadcrumbs-v5-title\"><\/h2><span class=\"breadcrumbs-v5-subtitle\"><\/span><\/section><\/div><\/div><\/div><\/section><style>.ffb-id-h7lqa1q{ padding-top: 170px;padding-bottom: 100px;}.ffb-id-h7lqsit  .breadcrumbs-v5-title{ color:#ffffff;}.ffb-id-h7lqsit  a{ color:#ffffff;}.ffb-id-h7lqsit  a:hover{ color:#004687;}.ffb-id-h7lqsit  .breadcrumbs-v5-subtitle{ color:#ffffff;}.ffb-id-h7lqsit  .breadcrumbs-v5-subtitle .active{ color:#ffffff;}<\/style><script type=\"text\/javascript\"><\/script><section class=\"ffb-id-haoovso fg-section fg-text-dark\"><div class=\"fg-container container fg-container-large fg-container-lvl--1 \"><div class=\"fg-row row    \" ><div class=\"ffb-id-haoovsp fg-col col-xs-12 col-md-6 fg-text-dark\"><section class=\"ffb-id-haotm5k progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">PHP&nbsp; - 83%<\/h4> <div class=\"progress radius-0 progress-xs\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"83\"><\/div><\/div><\/section><section class=\"ffb-id-haotusk progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">WordPress&nbsp; - 76%<\/h4> <div class=\"progress radius-0 progress-xs\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"76\"><\/div><\/div><\/section><section class=\"ffb-id-haott7l progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title font-style-inherit fg-text-dark ffb-title\">HTML\/CSS&nbsp; - 97%<\/h4> <div class=\"progress radius-0 progress-xs\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"97\"><\/div><\/div><\/section><\/div><div class=\"ffb-id-haoovsq fg-col col-xs-12 col-xs-offset-0 col-xs-pull-0 col-xs-push-0 col-md-6 fg-text-dark\"><section class=\"ffb-id-hap0oat progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">Web Design&nbsp;<span class=\"pull-right\">88%<\/span><\/h4> <div class=\"progress radius-0 progress-xs\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"88\"><\/div><\/div><\/section><section class=\"ffb-id-hap25on progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">PHP\/WordPress&nbsp;<span class=\"pull-right\">76%<\/span><\/h4> <div class=\"progress radius-0 progress-xs\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"76\"><\/div><\/div><\/section><section class=\"ffb-id-hap270s progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">HTML\/CSS&nbsp;<span class=\"pull-right\">97%<\/span><\/h4> <div class=\"progress radius-0 progress-xs\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"97\"><\/div><\/div><\/section><\/div><\/div><\/div><\/section><style>.ffb-id-h7lqa1q{ \npadding-top: 170px;\npadding-bottom: 100px;\n\n}\n.ffb-id-h7lqsit  .breadcrumbs-v5-title{ \ncolor:#ffffff;\n}\n.ffb-id-h7lqsit  a{ \ncolor:#ffffff;\n}\n.ffb-id-h7lqsit  a:hover{ \ncolor:#004687;\n}\n.ffb-id-h7lqsit  .breadcrumbs-v5-subtitle{ \ncolor:#ffffff;\n}\n.ffb-id-h7lqsit  .breadcrumbs-v5-subtitle .active{ \ncolor:#ffffff;\n}\n.ffb-id-haoovso{ padding-top: 80px;padding-bottom: 80px;}.ffb-id-hap270s .progress{ background-color: #f2f4f9;}.ffb-id-hap270s .progress-bar{ background-color: #34343c;}.ffb-id-hap25on .progress{ background-color: #f2f4f9;}.ffb-id-hap25on .progress-bar{ background-color: #34343c;}.ffb-id-hap0oat .progress{ background-color: #f2f4f9;}.ffb-id-hap0oat .progress-bar{ background-color: #34343c;}.ffb-id-haoovsp{ padding-bottom: 30px;}@media (min-width:992px) { .ffb-id-haoovsp{ padding-bottom: 0px;}}.ffb-id-haott7l .progress{ background-color: #f2f4f9;}.ffb-id-haott7l .progress-bar{ background-color: #004687;}.ffb-id-haotusk .progress{ background-color: #f2f4f9;}.ffb-id-haotusk .progress-bar{ background-color: #004687;}.ffb-id-haotm5k .progress{ background-color: #f2f4f9;}.ffb-id-haotm5k .progress-bar{ background-color: #004687;}<\/style><script type=\"text\/javascript\"><\/script><section class=\"ffb-id-haoovso fg-section fg-el-has-bg fg-text-dark\"><span class=\"fg-bg\"><span data-fg-bg=\"{&quot;type&quot;:&quot;color&quot;,&quot;opacity&quot;:1,&quot;color&quot;:&quot;#f7f8fa&quot;}\" class=\"fg-bg-layer fg-bg-type-color \" style=\"opacity: 1; background-color: #f7f8fa;\"><\/span><\/span><div class=\"fg-container container fg-container-large fg-container-lvl--1 \"><div class=\"fg-row row    \" ><div class=\"ffb-id-haoovsp fg-col col-xs-12 col-xs-offset-0 col-xs-pull-0 col-xs-push-0 col-md-6 fg-text-dark\"><section class=\"ffb-id-haotm5k progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">PHP\/WordPress&nbsp; - 83%<\/h4> <div class=\"progress radius-0 progress-sm\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"83\"><\/div><\/div><\/section><section class=\"ffb-id-haotusk progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">PHP\/WordPress&nbsp; - 76%<\/h4> <div class=\"progress radius-0 progress-sm\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"76\"><\/div><\/div><\/section><section class=\"ffb-id-haott7l progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title font-style-inherit fg-text-dark ffb-title\">HTML\/CSS&nbsp; - 97%<\/h4> <div class=\"progress radius-0 progress-sm\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"97\"><\/div><\/div><\/section><\/div><div class=\"ffb-id-haoovsq fg-col col-xs-12 col-xs-offset-0 col-xs-pull-0 col-xs-push-0 col-md-6 fg-text-dark\"><section class=\"ffb-id-hap0oat progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">Web Design&nbsp;<span class=\"pull-right\">88%<\/span><\/h4> <div class=\"progress radius-0 progress-sm\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"88\"><\/div><\/div><\/section><section class=\"ffb-id-hap25on progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">PHP\/WordPress&nbsp;<span class=\"pull-right\">76%<\/span><\/h4> <div class=\"progress radius-0 progress-sm\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"76\"><\/div><\/div><\/section><section class=\"ffb-id-hap270s progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">HTML\/CSS&nbsp;<span class=\"pull-right\">97%<\/span><\/h4> <div class=\"progress radius-0 progress-sm\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"97\"><\/div><\/div><\/section><\/div><\/div><\/div><\/section><style>.ffb-id-haoovso{ \npadding-top: 80px;\npadding-bottom: 80px;\n\n}\n.ffb-id-hap270s .progress{ \nbackground-color: #f2f4f9;\n}\n.ffb-id-hap270s .progress-bar{ \nbackground-color: #34343c;\n}\n.ffb-id-hap25on .progress{ \nbackground-color: #f2f4f9;\n}\n.ffb-id-hap25on .progress-bar{ \nbackground-color: #34343c;\n}\n.ffb-id-hap0oat .progress{ \nbackground-color: #f2f4f9;\n}\n.ffb-id-hap0oat .progress-bar{ \nbackground-color: #34343c;\n}\n.ffb-id-haoovsp{ \npadding-bottom: 30px;\n\n}\n@media (min-width:992px) { \n.ffb-id-haoovsp{ \npadding-bottom: 0px;\n\n}\n}.ffb-id-haott7l .progress{ \nbackground-color: #f2f4f9;\n}\n.ffb-id-haott7l .progress-bar{ \nbackground-color: #004687;\n}\n.ffb-id-haotusk .progress{ \nbackground-color: #f2f4f9;\n}\n.ffb-id-haotusk .progress-bar{ \nbackground-color: #004687;\n}\n.ffb-id-haotm5k .progress{ \nbackground-color: #f2f4f9;\n}\n.ffb-id-haotm5k .progress-bar{ \nbackground-color: #004687;\n}\n<\/style><script type=\"text\/javascript\"><\/script><section class=\"ffb-id-haoovso fg-section fg-text-dark\"><div class=\"fg-container container fg-container-large fg-container-lvl--1 \"><div class=\"fg-row row    \" ><div class=\"ffb-id-haoovsp fg-col col-xs-12 col-xs-offset-0 col-xs-pull-0 col-xs-push-0 col-md-6 fg-text-dark\"><section class=\"ffb-id-haotm5k progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">PHP\/WordPress&nbsp; - 83%<\/h4> <div class=\"progress radius-0 progress-md\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"83\"><\/div><\/div><\/section><section class=\"ffb-id-haotusk progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">PHP\/WordPress&nbsp; - 76%<\/h4> <div class=\"progress radius-0 progress-md\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"76\"><\/div><\/div><\/section><section class=\"ffb-id-haott7l progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title font-style-inherit fg-text-dark ffb-title\">HTML\/CSS&nbsp; - 97%<\/h4> <div class=\"progress radius-0 progress-md\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"97\"><\/div><\/div><\/section><\/div><div class=\"ffb-id-haoovsq fg-col col-xs-12 col-xs-offset-0 col-xs-pull-0 col-xs-push-0 col-md-6 fg-text-dark\"><section class=\"ffb-id-hap0oat progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">Web Design&nbsp;<span class=\"pull-right\">88%<\/span><\/h4> <div class=\"progress radius-0 progress-md\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"88\"><\/div><\/div><\/section><section class=\"ffb-id-hap25on progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">PHP\/WordPress&nbsp;<span class=\"pull-right\">76%<\/span><\/h4> <div class=\"progress radius-0 progress-md\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"76\"><\/div><\/div><\/section><section class=\"ffb-id-hap270s progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">HTML\/CSS&nbsp;<span class=\"pull-right\">97%<\/span><\/h4> <div class=\"progress radius-0 progress-md\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"97\"><\/div><\/div><\/section><\/div><\/div><\/div><\/section><style><\/style><script type=\"text\/javascript\"><\/script><section class=\"ffb-id-haoovso fg-section fg-el-has-bg fg-text-dark\"><span class=\"fg-bg\"><span data-fg-bg=\"{&quot;type&quot;:&quot;color&quot;,&quot;opacity&quot;:1,&quot;color&quot;:&quot;#f7f8fa&quot;}\" class=\"fg-bg-layer fg-bg-type-color \" style=\"opacity: 1; background-color: #f7f8fa;\"><\/span><\/span><div class=\"fg-container container fg-container-large fg-container-lvl--1 \"><div class=\"fg-row row    \" ><div class=\"ffb-id-haoovsp fg-col col-xs-12 col-xs-offset-0 col-xs-pull-0 col-xs-push-0 col-md-6 fg-text-dark\"><section class=\"ffb-id-haotm5k progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">PHP\/WordPress&nbsp; - 83%<\/h4> <div class=\"progress radius-0 progress-lg\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"83\"><\/div><\/div><\/section><section class=\"ffb-id-haotusk progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">PHP\/WordPress&nbsp; - 76%<\/h4> <div class=\"progress radius-0 progress-lg\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"76\"><\/div><\/div><\/section><section class=\"ffb-id-haott7l progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title font-style-inherit fg-text-dark ffb-title\">HTML\/CSS&nbsp; - 97%<\/h4> <div class=\"progress radius-0 progress-lg\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"97\"><\/div><\/div><\/section><\/div><div class=\"ffb-id-haoovsq fg-col col-xs-12 col-xs-offset-0 col-xs-pull-0 col-xs-push-0 col-md-6 fg-text-dark\"><section class=\"ffb-id-hap0oat progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">Web Design&nbsp;<span class=\"pull-right\">88%<\/span><\/h4> <div class=\"progress radius-0 progress-lg\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"88\"><\/div><\/div><\/section><section class=\"ffb-id-hap25on progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">PHP\/WordPress&nbsp;<span class=\"pull-right\">76%<\/span><\/h4> <div class=\"progress radius-0 progress-lg\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"76\"><\/div><\/div><\/section><section class=\"ffb-id-hap270s progress-box progress-box-v1 fg-text-dark\"><h4 class=\"progress-title  fg-text-dark ffb-title\">HTML\/CSS&nbsp;<span class=\"pull-right\">97%<\/span><\/h4> <div class=\"progress radius-0 progress-lg\"><div class=\"progress-bar \" role=\"progressbar\" data-width=\"97\"><\/div><\/div><\/section><\/div><\/div><\/div><\/section><style><\/style><script type=\"text\/javascript\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":5384,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"acf":[],"_links":{"self":[{"href":"https:\/\/durantlax.com\/index.php\/wp-json\/wp\/v2\/pages\/624"}],"collection":[{"href":"https:\/\/durantlax.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/durantlax.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/durantlax.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/durantlax.com\/index.php\/wp-json\/wp\/v2\/comments?post=624"}],"version-history":[{"count":1,"href":"https:\/\/durantlax.com\/index.php\/wp-json\/wp\/v2\/pages\/624\/revisions"}],"predecessor-version":[{"id":11355,"href":"https:\/\/durantlax.com\/index.php\/wp-json\/wp\/v2\/pages\/624\/revisions\/11355"}],"up":[{"embeddable":true,"href":"https:\/\/durantlax.com\/index.php\/wp-json\/wp\/v2\/pages\/5384"}],"wp:attachment":[{"href":"https:\/\/durantlax.com\/index.php\/wp-json\/wp\/v2\/media?parent=624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}