{"id":16260,"date":"2025-03-24T07:26:29","date_gmt":"2025-03-24T07:26:29","guid":{"rendered":"https:\/\/wptablebuilder.com\/?post_type=docs&#038;p=16260"},"modified":"2025-03-24T07:26:33","modified_gmt":"2025-03-24T07:26:33","password":"","slug":"progress-bar-pro-element","status":"publish","type":"docs","link":"https:\/\/wptablebuilder.com\/docs\/progress-bar-pro-element\/","title":{"rendered":"Progress Bar (Pro Element)"},"content":{"rendered":"\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"336\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2023\/08\/How_To_Add_Progress_Bar_Pro_Element_In_WP_Table_Builder_WPTB850x335.png\" alt=\"\" class=\"wp-image-16338\" srcset=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2023\/08\/How_To_Add_Progress_Bar_Pro_Element_In_WP_Table_Builder_WPTB850x335.png 850w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2023\/08\/How_To_Add_Progress_Bar_Pro_Element_In_WP_Table_Builder_WPTB850x335-300x119.png 300w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2023\/08\/How_To_Add_Progress_Bar_Pro_Element_In_WP_Table_Builder_WPTB850x335-768x304.png 768w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Progress Bar<\/strong> is a pro element that is only available in the WP Table Builder pro version.<\/p>\n\n\n\n<p>The <strong>progress bar<\/strong> in a table visually represents the completion status or progress of a specific task, project, or process associated with the data in the table.<\/p>\n\n\n\n<p>Adding the Progress Bar is easy. Just drag &amp; drop the Progress Bar Element into the table.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"910\" height=\"750\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2023\/07\/2025-03-24_13-17-14.gif\" alt=\"\" class=\"wp-image-20903\" style=\"border-width:1px;border-radius:3px\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Progress Bar Options<\/h2>\n\n\n\n<p>You will get <strong>5 progress bar options<\/strong> to customize your progress bar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Value<\/h3>\n\n\n\n<p>The value allows you to set the static number of your progress bar. By default, the value is 35%.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"910\" height=\"748\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2023\/07\/2025-03-24_13-18-27.gif\" alt=\"\" class=\"wp-image-20904\" style=\"border-width:1px;border-radius:3px\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bar Thickness<\/h3>\n\n\n\n<p>The bar thickness lets you determine the bar thickness. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"908\" height=\"744\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2023\/07\/2025-03-24_13-19-34.gif\" alt=\"\" class=\"wp-image-20905\" style=\"border-width:1px;border-radius:3px\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Primary Color, Secondary Color, &amp; Label Color<\/h3>\n\n\n\n<p>The <strong>color lets you choose the bar&#8217;s label&#8217;s color<\/strong>. The <strong>Primary color lets you choose the bar color<\/strong>. Finally, the <strong>secondary color lets you determine the color for the remaining bar<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"908\" height=\"746\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2023\/07\/2025-03-24_13-23-09.gif\" alt=\"\" class=\"wp-image-20906\" style=\"border-width:1px;border-radius:3px\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Hope you find this little tutorial helpful. Feel free to drop your thoughts in the comment section.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Progress Bar is a pro element that is only available in the WP Table Builder pro version. The progress bar in a table visually represents the completion status or progress of a specific task, project, or process associated with the data in the table. Adding the Progress Bar is easy. Just drag &amp; drop the [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[15],"doc_tag":[],"class_list":["post-16260","docs","type-docs","status-publish","hentry","doc_category-elements"],"year_month":"2026-06","word_count":160,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Ankur Raz Bongshi","author_nicename":"rajankur003","author_url":"https:\/\/wptablebuilder.com\/author\/rajankur003\/"},"doc_category_info":[{"term_name":"Elements","term_url":"https:\/\/wptablebuilder.com\/docs-category\/elements\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/wptablebuilder.com\/wp-json\/wp\/v2\/docs\/16260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wptablebuilder.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/wptablebuilder.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/wptablebuilder.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/wptablebuilder.com\/wp-json\/wp\/v2\/comments?post=16260"}],"version-history":[{"count":3,"href":"https:\/\/wptablebuilder.com\/wp-json\/wp\/v2\/docs\/16260\/revisions"}],"predecessor-version":[{"id":20907,"href":"https:\/\/wptablebuilder.com\/wp-json\/wp\/v2\/docs\/16260\/revisions\/20907"}],"wp:attachment":[{"href":"https:\/\/wptablebuilder.com\/wp-json\/wp\/v2\/media?parent=16260"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/wptablebuilder.com\/wp-json\/wp\/v2\/doc_category?post=16260"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/wptablebuilder.com\/wp-json\/wp\/v2\/doc_tag?post=16260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}