{"id":323,"date":"2017-02-19T04:22:22","date_gmt":"2017-02-19T04:22:22","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=323"},"modified":"2017-02-19T04:22:22","modified_gmt":"2017-02-19T04:22:22","slug":"progress-bar","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/progress-bar\/","title":{"rendered":"Progress Bar"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-aex3b7-013fdcf9c988f3deee1fa640bb8fe2fb\">\n.flex_column.av-aex3b7-013fdcf9c988f3deee1fa640bb8fe2fb{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-aex3b7-013fdcf9c988f3deee1fa640bb8fe2fb av_one_full first flex_column_div av-zero-column-padding  '     ><p>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-a4za4z-c43a9eb3868f980657e3ba40ef1f3e90\">\n#top .av-special-heading.av-a4za4z-c43a9eb3868f980657e3ba40ef1f3e90{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-a4za4z-c43a9eb3868f980657e3ba40ef1f3e90 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-a4za4z-c43a9eb3868f980657e3ba40ef1f3e90 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-a4za4z-c43a9eb3868f980657e3ba40ef1f3e90 av-special-heading-h1 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  >Progress Bar<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div><br \/>\n<div  class='hr av-9zl6hf-cf30d6a9d67271b41c9be9e61a86bf7c hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-9sts4z-3b6e9212023b63128ad7255894b27979 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Overview<\/h2>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-9mokej-2087c9da36dcce5fdabb7f10efba8089 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Add any number of progress bars in various predefined colors, either with or without icon, with or without description. Perfect if you want to<strong>\u00a0display some progress<\/strong>\u00a0or display a\u00a0<strong>skill<\/strong>\u00a0you or your company has mastered and how good you are at it.<\/p>\n<\/div><\/section><br \/>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-9hpkqb-a39774438ed28fbc1425ece9c8d0731c\">\n.avia-progress-bar-container.av-9hpkqb-a39774438ed28fbc1425ece9c8d0731c .progress{\nheight:10px;\n}\n<\/style>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-sub-av-9hpkqb-a39774438ed28fbc1425ece9c8d0731c\">\n#top .avia-progress-bar-container .avia-progress-bar.av-9edzy3-e1729d228ab19b1aca89c330f61b63e0 .bar{\nwidth:100%;\nbackground:#83a846;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-98n5yj-13c4e101d65273d06865b8bfee11c596 .bar{\nwidth:91%;\nbackground:#555;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-921qw3-6417967c20408ec4391b331965da2400 .bar{\nwidth:78%;\nbackground:#EDAE44;\n}\n<\/style>\n<div  class='avia-progress-bar-container av-9hpkqb-a39774438ed28fbc1425ece9c8d0731c av-flat-bar av-animated-bar av-small-bar avia_animate_when_almost_visible  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><div class='avia-progress-bar av-9edzy3-e1729d228ab19b1aca89c330f61b63e0 icon-bar-no green-bar icon-bar-no'><div class=\"progressbar-title-wrap\"><div class=\"progressbar-icon\"><span class='progressbar-char avia-iconfont avia-font-entypo-fontello' data-av_icon='' data-av_iconfont='entypo-fontello' ><\/span><\/div><div class='progressbar-title'>BAR 1<\/div><\/div><div class=\"progressbar-percent\" data-timer=\"2200\"><span class='av-bar-counter __av-single-number' data-number='100'>0<\/span>%<\/div><div class=\"progress\"><div class=\"bar-outer\"><div class='bar' data-progress='100'><\/div><\/div><\/div><\/div><div class='avia-progress-bar av-98n5yj-13c4e101d65273d06865b8bfee11c596 icon-bar-no blue-bar icon-bar-no'><div class=\"progressbar-title-wrap\"><div class=\"progressbar-icon\"><span class='progressbar-char avia-iconfont avia-font-entypo-fontello' data-av_icon='' data-av_iconfont='entypo-fontello' ><\/span><\/div><div class='progressbar-title'>BAR 2<\/div><\/div><div class=\"progressbar-percent\" data-timer=\"2200\"><span class='av-bar-counter __av-single-number' data-number='91'>0<\/span>%<\/div><div class=\"progress\"><div class=\"bar-outer\"><div class='bar' data-progress='91'><\/div><\/div><\/div><\/div><div class='avia-progress-bar av-921qw3-6417967c20408ec4391b331965da2400 icon-bar-no orange-bar icon-bar-no'><div class=\"progressbar-title-wrap\"><div class=\"progressbar-icon\"><span class='progressbar-char avia-iconfont avia-font-entypo-fontello' data-av_icon='' data-av_iconfont='entypo-fontello' ><\/span><\/div><div class='progressbar-title'>BAR 3<\/div><\/div><div class=\"progressbar-percent\" data-timer=\"2200\"><span class='av-bar-counter __av-single-number' data-number='78'>0<\/span>%<\/div><div class=\"progress\"><div class=\"bar-outer\"><div class='bar' data-progress='78'><\/div><\/div><\/div><\/div><\/div><br \/>\n<section  class='av_textblock_section av-w5btv-1be22ad864469ef78bc580f62883a66e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>View more examples of <a href=\"https:\/\/kriesi.at\/themes\/enfold-2017\/elements\/progress-bars\/\" target=\"_blank\" rel=\"noopener\">Progress Bar<\/a>.<\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-8pd2az-b8f35c6014ed31c697bc27a19c647e62 hr-default  avia-builder-el-6  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-8k0fw3-41e850d07719c502836f21d8d9d0c068 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Progress Bar Settings<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-8co8bf-b3202d9be5f828ae0aec06c0b92de9fa '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><ul>\n<li>Add\/Edit\n<ul>\n<li>Progress Bars Title<\/li>\n<li>Progress in %<\/li>\n<li>Bar Color<\/li>\n<li>Icon<\/li>\n<\/ul>\n<\/li>\n<li>Progress Bar Color<\/li>\n<li>Progress Bar Animation<\/li>\n<li>Progress Bar Style<\/li>\n<\/ul>\n<\/div><\/section><br \/>\n<div  class='hr av-87mu83-77456cdb358fb8488f37abbf6a29f289 hr-default  avia-builder-el-9  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-7zn4yz-f9cc69f4fd5565045943694aa90b4b04 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Code Snippets<\/h2>\n<\/div><\/section><br \/>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-11  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div><br \/>\n<div  class='hr av-7nal43-17792a7795f3c5d3517bd972f5af83bd hr-default  avia-builder-el-12  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-7jhjgz-336b5cbc138484fb2755150207bfb47d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section><br \/>\n<br \/>\n<div  class='hr av-6dosy3-0899cab32a178479633ea1097be8471c hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-67hrmj-56101dc7e4b9a11355ad6972f41db0ff '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section><br \/>\n<div  class='hr av-5zv9oj-4c658c13a19a411c1f069e87fff91614 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-5x2bf7-84ea2c04cc9fd3deb59892d6997ebb23 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Custom styled progress bar 2<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-5q2037-628a9ef8e644af0e90fc42dd1db69b90 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>We can change the way each progress bar looks by adding custom CSS<\/p>\n<\/div><\/section><br \/>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-jqw2j-8713d837dce1319783a57f4660456585\">\n.avia-progress-bar-container.av-jqw2j-8713d837dce1319783a57f4660456585 .progress{\nheight:10px;\n}\n<\/style>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-sub-av-jqw2j-8713d837dce1319783a57f4660456585\">\n#top .avia-progress-bar-container .avia-progress-bar.av-9edzy3-e1729d228ab19b1aca89c330f61b63e0 .bar{\nwidth:100%;\nbackground:#83a846;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-98n5yj-13c4e101d65273d06865b8bfee11c596 .bar{\nwidth:91%;\nbackground:#555;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-921qw3-6417967c20408ec4391b331965da2400 .bar{\nwidth:78%;\nbackground:#EDAE44;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-5cx797-fa5b65c1b5e8693b0b9103172734c521 .bar{\nwidth:89%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-55tggr-aa780054d0444d58934c2e488ce775d9 .bar{\nwidth:84%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-52cst7-e4b5c09a311159427d8e5d2af5061fd1 .bar{\nwidth:94%;\n}\n<\/style>\n<div  class='avia-progress-bar-container av-jqw2j-8713d837dce1319783a57f4660456585 av-flat-bar av-animated-bar av-small-bar avia_animate_when_almost_visible  avia-builder-el-15  avia-builder-el-no-sibling  progress-bar-style-2'><div class='avia-progress-bar av-5cx797-fa5b65c1b5e8693b0b9103172734c521 icon-bar-yes theme-color-bar theme-color-bar icon-bar-yes'><div class=\"progressbar-title-wrap\"><div class=\"progressbar-icon\"><span class='progressbar-char avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue856' data-av_iconfont='entypo-fontello' ><\/span><\/div><div class='progressbar-title'>Skill <\/div><\/div><div class=\"progressbar-percent\" data-timer=\"2200\"><span class='av-bar-counter __av-single-number' data-number='89'>0<\/span>%<\/div><div class=\"progress\"><div class=\"bar-outer\"><div class='bar' data-progress='89'><\/div><\/div><\/div><\/div><div class='avia-progress-bar av-55tggr-aa780054d0444d58934c2e488ce775d9 icon-bar-yes theme-color-bar theme-color-bar icon-bar-yes'><div class=\"progressbar-title-wrap\"><div class=\"progressbar-icon\"><span class='progressbar-char avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue82f' data-av_iconfont='entypo-fontello' ><\/span><\/div><div class='progressbar-title'>Upload<\/div><\/div><div class=\"progressbar-percent\" data-timer=\"2200\"><span class='av-bar-counter __av-single-number' data-number='84'>0<\/span>%<\/div><div class=\"progress\"><div class=\"bar-outer\"><div class='bar' data-progress='84'><\/div><\/div><\/div><\/div><div class='avia-progress-bar av-52cst7-e4b5c09a311159427d8e5d2af5061fd1 icon-bar-yes theme-color-bar theme-color-bar icon-bar-yes'><div class=\"progressbar-title-wrap\"><div class=\"progressbar-icon\"><span class='progressbar-char avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue863' data-av_iconfont='entypo-fontello' ><\/span><\/div><div class='progressbar-title'>Progress<\/div><\/div><div class=\"progressbar-percent\" data-timer=\"2200\"><span class='av-bar-counter __av-single-number' data-number='94'>0<\/span>%<\/div><div class=\"progress\"><div class=\"bar-outer\"><div class='bar' data-progress='94'><\/div><\/div><\/div><\/div><\/div><br \/>\n<section  class='av_textblock_section av-4wl9cz-f4b64b9cd3e58a0579c632e0178ff0d8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\n\/\/ CSS - Social Share style - 2\n\/\/--------------------------------------*\/\n.avia-progress-bar-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n .avia-progress-bar {\n    margin: 0 50px;\n}\n\n#top  .progressbar-title-wrap {\n    padding: 20px;\n    margin-bottom: 20px;\n    background: #333!important;\n    width: 150px;\n    height: 150px;\n    border-radius: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n    flex-direction: row;\n    text-align: center;\n}\n\n#top  .progress {\n    max-height: 4px;\n}\n\n\n .progressbar-percent {\n    opacity: 1;\n    float: none;\n    position: absolute;\n    top: 40%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 36px;\n    line-height: 150px;\n    font-weight: bolder;\n    color: #fff;\n    z-index: 999;\n}\n\n\n .progressbar-title {\n    font-weight: lighter!important;\n}\n\n .progressbar-title,\n .progressbar-icon {\n    top: 0;\n    position: relative;\n    transform: translateY(35px);\n    color: #fdfdfd;\n    letter-spacing: .05em;\n    margin-top: -10px;\n    text-transform: none;\n}\n\n\n#top .avia-progress-bar-container .avia-progress-bar {\n    margin-top: 0;\n}\n\n#top .avia-progress-bar-container .avia-progress-bar:nth-child(1) .progressbar-title-wrap,\n#top .avia-progress-bar-container .avia-progress-bar:nth-child(1) .bar {\n    background: #0099e5!important;\n}\n\n#top .avia-progress-bar-container .avia-progress-bar:nth-child(2) .progressbar-title-wrap,\n#top .avia-progress-bar-container .avia-progress-bar:nth-child(2) .bar {\n    background: #ff4c4c!important;\n}\n\n#top .avia-progress-bar-container .avia-progress-bar:nth-child(3) .progressbar-title-wrap,\n#top .avia-progress-bar-container .avia-progress-bar:nth-child(3) .bar {\n    background: #34bf49!important;\n}\n<\/pre>\n<\/div><\/section><br \/>\n<div  class='hr av-4nvcfn-4d69c9caa4843a7c760892a5cccc97ac hr-default  avia-builder-el-16  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-4hvt6b-e3268be3ce1d036f218bdfb43712999c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Custom styled progress bar 1<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-4edv83-7b7668e1edb71b3296205729d69cbcbc '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>We can change the way your progress bar looks by adding custom CSS<\/p>\n<\/div><\/section><br \/>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-45n9lv-8bdf347d611b14905e9c9c30463f1870\">\n.avia-progress-bar-container.av-45n9lv-8bdf347d611b14905e9c9c30463f1870 .progress{\nheight:10px;\n}\n<\/style>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-sub-av-45n9lv-8bdf347d611b14905e9c9c30463f1870\">\n#top .avia-progress-bar-container .avia-progress-bar.av-9edzy3-e1729d228ab19b1aca89c330f61b63e0 .bar{\nwidth:100%;\nbackground:#83a846;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-98n5yj-13c4e101d65273d06865b8bfee11c596 .bar{\nwidth:91%;\nbackground:#555;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-921qw3-6417967c20408ec4391b331965da2400 .bar{\nwidth:78%;\nbackground:#EDAE44;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-5cx797-fa5b65c1b5e8693b0b9103172734c521 .bar{\nwidth:89%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-55tggr-aa780054d0444d58934c2e488ce775d9 .bar{\nwidth:84%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-52cst7-e4b5c09a311159427d8e5d2af5061fd1 .bar{\nwidth:94%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-447b8j-728e14a1015f0ad5ac97c3f2d7463ffe .bar{\nwidth:89%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-3xtdgj-c4d40756a0a8bf77549ee4b7f21f193b .bar{\nwidth:94%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-3rta4z-7758c412b7c39a958a9cc6037abd0f74 .bar{\nwidth:84%;\n}\n<\/style>\n<div  class='avia-progress-bar-container av-45n9lv-8bdf347d611b14905e9c9c30463f1870 av-flat-bar av-animated-bar av-small-bar avia_animate_when_almost_visible  progress-bar-style-1'><div class='avia-progress-bar av-447b8j-728e14a1015f0ad5ac97c3f2d7463ffe icon-bar-yes theme-color-bar theme-color-bar icon-bar-yes'><div class=\"progressbar-title-wrap\"><div class=\"progressbar-icon\"><span class='progressbar-char avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue856' data-av_iconfont='entypo-fontello' ><\/span><\/div><div class='progressbar-title'>Skill <\/div><\/div><div class=\"progressbar-percent\" data-timer=\"2200\"><span class='av-bar-counter __av-single-number' data-number='89'>0<\/span>%<\/div><div class=\"progress\"><div class=\"bar-outer\"><div class='bar' data-progress='89'><\/div><\/div><\/div><\/div><div class='avia-progress-bar av-3xtdgj-c4d40756a0a8bf77549ee4b7f21f193b icon-bar-yes theme-color-bar theme-color-bar icon-bar-yes'><div class=\"progressbar-title-wrap\"><div class=\"progressbar-icon\"><span class='progressbar-char avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue863' data-av_iconfont='entypo-fontello' ><\/span><\/div><div class='progressbar-title'>Progress<\/div><\/div><div class=\"progressbar-percent\" data-timer=\"2200\"><span class='av-bar-counter __av-single-number' data-number='94'>0<\/span>%<\/div><div class=\"progress\"><div class=\"bar-outer\"><div class='bar' data-progress='94'><\/div><\/div><\/div><\/div><div class='avia-progress-bar av-3rta4z-7758c412b7c39a958a9cc6037abd0f74 icon-bar-yes theme-color-bar theme-color-bar icon-bar-yes'><div class=\"progressbar-title-wrap\"><div class=\"progressbar-icon\"><span class='progressbar-char avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue82f' data-av_iconfont='entypo-fontello' ><\/span><\/div><div class='progressbar-title'>Upload<\/div><\/div><div class=\"progressbar-percent\" data-timer=\"2200\"><span class='av-bar-counter __av-single-number' data-number='84'>0<\/span>%<\/div><div class=\"progress\"><div class=\"bar-outer\"><div class='bar' data-progress='84'><\/div><\/div><\/div><\/div><\/div><br \/>\n<section  class='av_textblock_section av-3j1uff-70f4f976abb8baa6a3130dbb8b332f01 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/* --------------------\n   Progress bar style 1\n-----------------------*\/\n\n.avia-progress-bar-container {\n    \/*background: skyblue;*\/\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 50px;\n}\n\n\n .avia-progress-bar {\n    margin: 0 50px;\n}\n\n#top  .progressbar-title-wrap {\n    padding: 20px;\n    margin-bottom: 12px;\n    background: #333!important;\n    width: 150px;\n    height: 150px;\n    border-radius: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n    flex-direction: column;\n    text-align: center;\n}\n\n .progressbar-char:before {\n    font-size: 40px;\n    color: #FFF;\n}\n\n\n .progressbar-title {\n    text-transform: none;\n    color: #FFF;\n}\n\n .progressbar-icon {\n    margin-bottom: 10px;\n}\n #top .avia-progress-bar-container .avia-progress-bar {\n    margin-top: 0;\n}\n<\/pre>\n<\/div><\/section><br \/>\n<div  class='hr av-3gmf1v-8143b2876885d357f5d83bd78a0c2a35 hr-default  avia-builder-el-18  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-bu27n-1fa92027aa460825a137aa00596acef7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Custom Style<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-32ctur-1927e14811610faea27e9ffcfe7c50c3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Progress bar styles can be selected from the progress bar option. To add custom style to your progress bar you can use the CSS below.<\/p>\n<\/div><\/section><br \/>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-agj17-c15504f2ff36e58ed67f0f87361ad542\">\n.avia-progress-bar-container.av-agj17-c15504f2ff36e58ed67f0f87361ad542 .progress{\nheight:10px;\n}\n<\/style>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-sub-av-agj17-c15504f2ff36e58ed67f0f87361ad542\">\n#top .avia-progress-bar-container .avia-progress-bar.av-9edzy3-e1729d228ab19b1aca89c330f61b63e0 .bar{\nwidth:100%;\nbackground:#83a846;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-98n5yj-13c4e101d65273d06865b8bfee11c596 .bar{\nwidth:91%;\nbackground:#555;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-921qw3-6417967c20408ec4391b331965da2400 .bar{\nwidth:78%;\nbackground:#EDAE44;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-5cx797-fa5b65c1b5e8693b0b9103172734c521 .bar{\nwidth:89%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-55tggr-aa780054d0444d58934c2e488ce775d9 .bar{\nwidth:84%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-52cst7-e4b5c09a311159427d8e5d2af5061fd1 .bar{\nwidth:94%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-447b8j-728e14a1015f0ad5ac97c3f2d7463ffe .bar{\nwidth:89%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-3xtdgj-c4d40756a0a8bf77549ee4b7f21f193b .bar{\nwidth:94%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-3rta4z-7758c412b7c39a958a9cc6037abd0f74 .bar{\nwidth:84%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-2t7obf-f38ce7ed8f7e63636019f0a2f42e8e2e .bar{\nwidth:94%;\nbackground:#83a846;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-2kgpkz-83960b216db38117e3961b1bc949b33a .bar{\nwidth:91%;\nbackground:#555;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-2gdujn-cf1120a3fedfa7ef6239b222ce37e613 .bar{\nwidth:78%;\nbackground:#EDAE44;\n}\n<\/style>\n<div  class='avia-progress-bar-container av-agj17-c15504f2ff36e58ed67f0f87361ad542 av-flat-bar av-animated-bar av-small-bar avia_animate_when_almost_visible  avia-builder-el-21  el_after_av_textblock  el_before_av_textblock  pbar-custom'><div class='avia-progress-bar av-2t7obf-f38ce7ed8f7e63636019f0a2f42e8e2e icon-bar-no green-bar icon-bar-no'><div class=\"progressbar-title-wrap\"><div class=\"progressbar-icon\"><span class='progressbar-char avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue806' data-av_iconfont='entypo-fontello' ><\/span><\/div><div class='progressbar-title'>BAR 1<\/div><\/div><div class=\"progressbar-percent\" data-timer=\"2200\"><span class='av-bar-counter __av-single-number' data-number='94'>0<\/span>%<\/div><div class=\"progress\"><div class=\"bar-outer\"><div class='bar' data-progress='94'><\/div><\/div><\/div><\/div><div class='avia-progress-bar av-2kgpkz-83960b216db38117e3961b1bc949b33a icon-bar-no blue-bar icon-bar-no'><div class=\"progressbar-title-wrap\"><div class=\"progressbar-icon\"><span class='progressbar-char avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue8f2' data-av_iconfont='entypo-fontello' ><\/span><\/div><div class='progressbar-title'>BAR 2<\/div><\/div><div class=\"progressbar-percent\" data-timer=\"2200\"><span class='av-bar-counter __av-single-number' data-number='91'>0<\/span>%<\/div><div class=\"progress\"><div class=\"bar-outer\"><div class='bar' data-progress='91'><\/div><\/div><\/div><\/div><div class='avia-progress-bar av-2gdujn-cf1120a3fedfa7ef6239b222ce37e613 icon-bar-no orange-bar icon-bar-no'><div class=\"progressbar-title-wrap\"><div class=\"progressbar-icon\"><span class='progressbar-char avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue8f4' data-av_iconfont='entypo-fontello' ><\/span><\/div><div class='progressbar-title'>BAR 3<\/div><\/div><div class=\"progressbar-percent\" data-timer=\"2200\"><span class='av-bar-counter __av-single-number' data-number='78'>0<\/span>%<\/div><div class=\"progress\"><div class=\"bar-outer\"><div class='bar' data-progress='78'><\/div><\/div><\/div><\/div><\/div><br \/>\n<section  class='av_textblock_section av-2ajv4r-1ea0f056cb982a593308ea025ffd5d91 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\n\/\/ CSS - Progress bar custom\n\/\/--------------------------------------*\/\n\n\t#top .avia-progress-bar div.progress .bar {\n\tbackground: #30E8BF;  \/* fallback for old browsers *\/  \/* Chrome 10-25, Safari 5.1-6 *\/\n\tbackground: -webkit-linear-gradient(right, #FF8235, #30E8BF);\n\tbackground: -o-linear-gradient(right, #FF8235, #30E8BF);\n\tbackground: linear-gradient(to left, #FF8235, #30E8BF); \/* W3C, IE 10+\/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *\/\n\tanimation:none;\n\tbackground-size: 100%!important;\n\t}<\/pre>\n<\/div><\/section><br \/>\n<div  class='hr av-24qiv7-4417043b8bec6a623c51275d59280f01 hr-default  avia-builder-el-23  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1uoeln-8387752ca900b0bcf193a386b34adff8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Replace % symbol with icon<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1sl0v7-a298f41db59df19c7459649337ccb9cd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The % symbol can be replaced with an\u00a0icon of your choice that comes with enfold by using the below custom CSS.<br \/>\nTo change the icon from tick to another change the icon unicode\u00a0value in line\u00a0<code> content:\"e812\";<\/code><\/p>\n<\/div><\/section><br \/>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-5mg23-70bc24a7d433459978d7ea7d84d8e15c\">\n.avia-progress-bar-container.av-5mg23-70bc24a7d433459978d7ea7d84d8e15c .progress{\nheight:10px;\n}\n<\/style>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-sub-av-5mg23-70bc24a7d433459978d7ea7d84d8e15c\">\n#top .avia-progress-bar-container .avia-progress-bar.av-9edzy3-e1729d228ab19b1aca89c330f61b63e0 .bar{\nwidth:100%;\nbackground:#83a846;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-98n5yj-13c4e101d65273d06865b8bfee11c596 .bar{\nwidth:91%;\nbackground:#555;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-921qw3-6417967c20408ec4391b331965da2400 .bar{\nwidth:78%;\nbackground:#EDAE44;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-5cx797-fa5b65c1b5e8693b0b9103172734c521 .bar{\nwidth:89%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-55tggr-aa780054d0444d58934c2e488ce775d9 .bar{\nwidth:84%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-52cst7-e4b5c09a311159427d8e5d2af5061fd1 .bar{\nwidth:94%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-447b8j-728e14a1015f0ad5ac97c3f2d7463ffe .bar{\nwidth:89%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-3xtdgj-c4d40756a0a8bf77549ee4b7f21f193b .bar{\nwidth:94%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-3rta4z-7758c412b7c39a958a9cc6037abd0f74 .bar{\nwidth:84%;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-2t7obf-f38ce7ed8f7e63636019f0a2f42e8e2e .bar{\nwidth:94%;\nbackground:#83a846;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-2kgpkz-83960b216db38117e3961b1bc949b33a .bar{\nwidth:91%;\nbackground:#555;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-2gdujn-cf1120a3fedfa7ef6239b222ce37e613 .bar{\nwidth:78%;\nbackground:#EDAE44;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-1gf47f-3718b598cef9323c14d1488116809dd6 .bar{\nwidth:94%;\nbackground:#83a846;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-19pjg3-1e604a15696b226af5d254b9fcd4bde1 .bar{\nwidth:57%;\nbackground:#555;\n}\n#top .avia-progress-bar-container .avia-progress-bar.av-128wx7-4650f579573c0986b201ac65446b0601 .bar{\nwidth:67%;\nbackground:#EDAE44;\n}\n<\/style>\n<div  class='avia-progress-bar-container av-5mg23-70bc24a7d433459978d7ea7d84d8e15c av-flat-bar av-animated-bar av-small-bar avia_animate_when_almost_visible  avia-builder-el-26  el_after_av_textblock  el_before_av_textblock  pbar-symbol'><div class='avia-progress-bar av-1gf47f-3718b598cef9323c14d1488116809dd6 icon-bar-no green-bar icon-bar-no'><div class=\"progressbar-title-wrap\"><div class=\"progressbar-icon\"><span class='progressbar-char avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue806' data-av_iconfont='entypo-fontello' ><\/span><\/div><div class='progressbar-title'>BAR 1<\/div><\/div><div class=\"progressbar-percent\" data-timer=\"2200\"><span class='av-bar-counter __av-single-number' data-number='94'>0<\/span>%<\/div><div class=\"progress\"><div class=\"bar-outer\"><div class='bar' data-progress='94'><\/div><\/div><\/div><\/div><div class='avia-progress-bar av-19pjg3-1e604a15696b226af5d254b9fcd4bde1 icon-bar-no blue-bar icon-bar-no'><div class=\"progressbar-title-wrap\"><div class=\"progressbar-icon\"><span class='progressbar-char avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue8f2' data-av_iconfont='entypo-fontello' ><\/span><\/div><div class='progressbar-title'>BAR 2<\/div><\/div><div class=\"progressbar-percent\" data-timer=\"2200\"><span class='av-bar-counter __av-single-number' data-number='57'>0<\/span>%<\/div><div class=\"progress\"><div class=\"bar-outer\"><div class='bar' data-progress='57'><\/div><\/div><\/div><\/div><div class='avia-progress-bar av-128wx7-4650f579573c0986b201ac65446b0601 icon-bar-no orange-bar icon-bar-no'><div class=\"progressbar-title-wrap\"><div class=\"progressbar-icon\"><span class='progressbar-char avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue8f4' data-av_iconfont='entypo-fontello' ><\/span><\/div><div class='progressbar-title'>BAR 3<\/div><\/div><div class=\"progressbar-percent\" data-timer=\"2200\"><span class='av-bar-counter __av-single-number' data-number='67'>0<\/span>%<\/div><div class=\"progress\"><div class=\"bar-outer\"><div class='bar' data-progress='67'><\/div><\/div><\/div><\/div><\/div><br \/>\n<section  class='av_textblock_section av-ymn3v-54f9fe95e6798e5f38e006a04bcefacc '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre><code>\n\/*----------------------------------------\n\/\/ CSS - Progress bar symbol\n\/\/--------------------------------------*\/\n.progressbar-percent {\n\tcolor:transparent;\n\tmargin-right:10px;\n}\n.progressbar-percent span {\n\tcolor: #000!important;\n}\n.progressbar-percent span:after {\n\tcontent:\"e812\";\n\tcolor:#000;\n\tfont-family: 'entypo-fontello';\n\tposition: absolute;\n\tmargin-left:5px;\n}\n\n\n<\/code><\/pre>\n<\/div><\/section><br \/>\n<div  class='hr av-rf1ff-6fa6e664289723965e83907013b3b7d8 hr-default  avia-builder-el-28  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-mvqkj-f32fb68baab4fdc3b096327bf1f21e76 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section><br \/>\n<div  class='hr av-de7tf-7435678c859e893e994eb1f606f89e03 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-bwdjn-b3e6b061d03208487960226d7e946da9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=WDW8xYD0Z4I\">Progress Bar Tutorial <\/a><\/p>\n<\/div><\/section><\/p><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[2,6],"tags":[16],"class_list":["post-323","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","tag-content-elements","documentation","content-elements"],"modified_by":"vinay","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=323"}],"version-history":[{"count":1,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/323\/revisions"}],"predecessor-version":[{"id":8272,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/323\/revisions\/8272"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}