{"id":2090,"date":"2026-10-14T04:40:21","date_gmt":"2026-10-14T04:40:21","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?post_type=docs&#038;p=2090"},"modified":"2026-10-18T05:52:52","modified_gmt":"2026-10-18T05:52:52","password":"","slug":"progress-bar","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/progress-bar\/","title":{"rendered":"Progress Bar"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Progress Bar Block displays a visual progress or skill indicator with a title and percentage value. You can choose between two progress bar styles, set the progress percentage, adjust the bar height, and customize the track, fill color, title, percentage text, and overall block appearance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add a Progress Bar Block<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add the Progress Bar Block<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open the page or post where you want to display the progress bar.<\/li>\n\n\n\n<li>Click the <strong>+ (Add Block)<\/strong> button in the Gutenberg editor.<\/li>\n\n\n\n<li>Search for <strong>Progress Bar<\/strong>.<\/li>\n\n\n\n<li>Select the Progress Bar Block to insert it into your page.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1581\" height=\"253\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-116.png\" alt=\"\" class=\"wp-image-2465\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-116.png 1581w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-116-762x122.png 762w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-116-300x48.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-116-1024x164.png 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-116-1536x246.png 1536w\" sizes=\"auto, (max-width: 1581px) 100vw, 1581px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure the Progress Bar Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select the Progress Bar Block and open the block settings panel. The available tabs are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settings:<\/strong> Choose the progress bar style, enter a title, and set the progress percentage.<\/li>\n\n\n\n<li><strong>Layout:<\/strong> Adjust the height of the progress bar for different devices.<\/li>\n\n\n\n<li><strong>Style:<\/strong> Customize the progress track, filled area, title, and percentage text.<\/li>\n\n\n\n<li><strong>Advanced:<\/strong> Configure the block&#8217;s spacing, background, and other available advanced settings.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Settings Tab<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Progress Bar<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Configure the content and display style of the progress bar.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Select Style:<\/strong> Choose one of the two available progress bar styles.\n<ul class=\"wp-block-list\">\n<li><strong>Style 1:<\/strong> Displays the title and percentage above the progress track.<\/li>\n\n\n\n<li><strong>Style 2:<\/strong> Displays the title above the bar, with the percentage inside the progress bar.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Title:<\/strong> Enter the title displayed with the progress bar, such as \u201cWeb Designer\u201d or \u201cDevelopment Skills.\u201d<\/li>\n\n\n\n<li><strong>Percent:<\/strong> Set the progress value from 0 to 100. The filled portion of the bar updates according to this percentage.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1484\" height=\"347\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-117.png\" alt=\"\" class=\"wp-image-2466\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-117.png 1484w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-117-300x70.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-117-766x179.png 766w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-117-1024x239.png 1024w\" sizes=\"auto, (max-width: 1484px) 100vw, 1484px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Layout Tab<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Bar Size<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Control the height of the progress bar.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Height (px):<\/strong> Set the height of the progress track in pixels. This control supports responsive settings for Desktop, Tablet, and Mobile devices.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Style Tab<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Progress<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the appearance of the progress track and its filled area.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Style 1:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Progress Color (track):<\/strong> Set the background color or gradient of the unfilled progress track.<\/li>\n\n\n\n<li><strong>Progress Bar Color (fill):<\/strong> Set the color or gradient of the filled portion of the bar.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Style 2:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Background:<\/strong> Set the background color or gradient of the progress track.<\/li>\n\n\n\n<li><strong>Progress Bar Color (fill):<\/strong> Set the color or gradient of the filled portion of the bar.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Border Radius (px):<\/strong> Adjust the roundness of the progress bar corners in pixels.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The available background controls depend on the style selected in the Settings tab.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Title<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the appearance of the progress bar title.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Color:<\/strong> Set the title text color.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Customize the title typography, including font family, size, weight, style, text transform, line height, and letter spacing. This control supports responsive settings.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Percent<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the appearance of the percentage value.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Color:<\/strong> Set the percentage text color.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Customize the percentage typography, including font family, size, weight, style, text transform, line height, and letter spacing. This control supports responsive settings.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1457\" height=\"730\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-118.png\" alt=\"\" class=\"wp-image-2467\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-118.png 1457w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-118-300x150.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-118-766x384.png 766w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-118-1024x513.png 1024w\" sizes=\"auto, (max-width: 1457px) 100vw, 1457px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Tab<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Spacing<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Control the spacing around the entire Progress Bar Block.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Padding:<\/strong> Set the inner spacing around the block. Responsive settings are available.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set the outer spacing around the block. Responsive settings are available.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Background<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the background of the entire Progress Bar Block.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background:<\/strong> Set a background color or gradient for the block.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Progress Bar Block displays a visual progress or skill indicator with a title and percentage value. You can choose between two progress bar styles, set the progress percentage, adjust the bar height, and customize the track, fill color, title, percentage text, and overall block appearance. How to Add a Progress Bar Block Step 1: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[19],"doc_tag":[],"class_list":["post-2090","docs","type-docs","status-publish","hentry","doc_category-showcase-block"],"year_month":"2026-10","word_count":510,"total_views":"3","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Showcase Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/showcase-block\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=2090"}],"version-history":[{"count":1,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2090\/revisions"}],"predecessor-version":[{"id":2468,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2090\/revisions\/2468"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=2090"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=2090"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=2090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}