{"id":21084,"date":"2026-08-10T06:40:33","date_gmt":"2026-08-10T06:40:33","guid":{"rendered":"https:\/\/bricksfly.com\/?post_type=docs&p=21084"},"modified":"2026-08-10T06:40:33","modified_gmt":"2026-08-10T06:40:33","slug":"how-to-add-progress-bar-using-bricksfly","status":"publish","type":"docs","link":"https:\/\/bricksfly.com\/docs\/general-widgets\/how-to-add-progress-bar-using-bricksfly\/","title":{"rendered":"How to Add Progress Bar in Bricks Builder Using BricksFly"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">BricksFly Progress Bar Element allows you to display progress values using different visual layouts. Follow the steps below to activate the element and configure its layout and percentage settings in Bricks Builder.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Requirement&nbsp;<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure you have installed:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Bricks Theme\u00a0<\/strong><\/li>\n\n\n\n<li><strong>BricksFly Pro<\/strong><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1919\" height=\"812\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Add-Bricks-Theme-1.webp\" alt=\"Add bricks theme \" class=\"wp-image-20777\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Add-Bricks-Theme-1.webp 1919w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Add-Bricks-Theme-1-300x127.webp 300w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Add-Bricks-Theme-1-1024x433.webp 1024w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Add-Bricks-Theme-1-768x325.webp 768w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Add-Bricks-Theme-1-1536x650.webp 1536w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1919\" height=\"732\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Adding-BricksFly-Pro-1.webp\" alt=\"Adding bricksfly pro \" class=\"wp-image-20778\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Adding-BricksFly-Pro-1.webp 1919w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Adding-BricksFly-Pro-1-300x114.webp 300w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Adding-BricksFly-Pro-1-1024x391.webp 1024w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Adding-BricksFly-Pro-1-768x293.webp 768w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Adding-BricksFly-Pro-1-1536x586.webp 1536w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Activate Progress Bar\u00a0in BricksFly<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to your\u00a0<strong>WordPress Dashboard.\u00a0<\/strong><\/li>\n\n\n\n<li>Click on<strong>\u00a0BricksFly.\u00a0<\/strong><\/li>\n\n\n\n<li>Head to the\u00a0<strong>Elements<\/strong>\u00a0tab.\u00a0<\/li>\n\n\n\n<li>Under\u00a0<strong>General,\u00a0<\/strong>toggle on\u00a0<strong>Progress Bar.<\/strong><\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1849\" height=\"902\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Activate-Progress-Bar.webp\" alt=\"Activate progress bar\" class=\"wp-image-21085\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Activate-Progress-Bar.webp 1849w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Activate-Progress-Bar-300x146.webp 300w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Activate-Progress-Bar-1024x500.webp 1024w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Activate-Progress-Bar-768x375.webp 768w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Activate-Progress-Bar-1536x749.webp 1536w\" sizes=\"(max-width: 1849px) 100vw, 1849px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Step 1: Select the Progress Bar Layout<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Click the Plus (+) icon and search for the Progress Bar element. Once it appears in the results, drag and drop it into the desired section of your page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"443\" height=\"661\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Search-Progress-bar-in-search-field.webp\" alt=\"Search progress bar in search field\" class=\"wp-image-21091\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Search-Progress-bar-in-search-field.webp 443w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Search-Progress-bar-in-search-field-201x300.webp 201w\" sizes=\"(max-width: 443px) 100vw, 443px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>Layout:<\/strong> Selects the visual style used to display the progress value. Available options include Line, Circle, and Dots. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Line:<\/strong> Displays the progress as a horizontal bar that fills according to the selected percentage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Circle:<\/strong> Displays the progress in a circular format, filling around the circle based on the selected percentage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Dots:<\/strong> Displays the progress using a series of dots, with the active dots representing the selected percentage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For this example, <strong>Line<\/strong> is selected. However, you can choose either option based on your preference.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"463\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Layout-settings-option-1024x463.webp\" alt=\"Layout settings option\" class=\"wp-image-21086\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Layout-settings-option-1024x463.webp 1024w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Layout-settings-option-300x136.webp 300w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Layout-settings-option-768x347.webp 768w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Layout-settings-option-1536x695.webp 1536w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Layout-settings-option.webp 1919w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Step 2: Set the Progress Value<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Percentage:<\/strong> Sets the progress value displayed by the Progress Bar Element. For example, setting the value to 75 displays the progress at 75%. However, in this example, 80% is added. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Display Percentage:<\/strong> Displays or hides the percentage value alongside or inside the progress indicator.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"440\" height=\"776\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Configuration-of-Progress-Bar.webp\" alt=\"Configuration of progress bar\" class=\"wp-image-21087\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Configuration-of-Progress-Bar.webp 440w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/08\/Configuration-of-Progress-Bar-170x300.webp 170w\" sizes=\"(max-width: 440px) 100vw, 440px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Done! You have successfully configured the BricksFly Progress Bar Element. You can now adjust the layout, percentage value, and display settings based on your design requirements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>BricksFly Progress Bar Element allows you to display progress values using different visual layouts. Follow the steps below to activate the element and configure its layout and percentage settings in Bricks Builder. Requirement&nbsp; Make sure you have installed: Activate Progress Bar\u00a0in BricksFly Step 1: Select the Progress Bar Layout Click the Plus (+) icon and [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":19716,"menu_order":14,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"doc_badge":[],"class_list":["post-21084","docs","type-docs","status-publish","hentry","no-post-thumbnail"],"acf":[],"author_avatar":"https:\/\/secure.gravatar.com\/avatar\/0f038df3bc60da556be64d3ba44b6ffdd6d13c4b411e58e68fbd35029c0b0b00?s=96&d=mm&r=g","author_name":"Elias","_links":{"self":[{"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs\/21084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/comments?post=21084"}],"version-history":[{"count":6,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs\/21084\/revisions"}],"predecessor-version":[{"id":21094,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs\/21084\/revisions\/21094"}],"up":[{"embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs\/19716"}],"wp:attachment":[{"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/media?parent=21084"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/doc_tag?post=21084"},{"taxonomy":"doc_badge","embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/doc_badge?post=21084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}