{"id":283,"date":"2020-05-21T06:05:51","date_gmt":"2020-05-21T06:05:51","guid":{"rendered":"http:\/\/essential-blocks.com\/?post_type=docs&#038;p=283"},"modified":"2022-07-04T09:03:49","modified_gmt":"2022-07-04T09:03:49","password":"","slug":"progress-bar","status":"publish","type":"docs","link":"https:\/\/essential-blocks.com\/docs\/progress-bar\/","title":{"rendered":"EB Progress Bar"},"content":{"rendered":"\n<p><strong><a href=\"https:\/\/essential-blocks.com\/demo\/progress-bar\/\">EB Progress Bar<\/a><\/strong> allows you to showcase key information about your company or personal profile. With the help of this element, you can easily visualize progression in specific fields in an eye-catchy manner.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How To Add A Progress Bar In Gutenberg\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/bMGkztRZ90s?list=PLWHp1xKHCfxAk6IzUeT_jvBDjiPghKJbe\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>How to Activate EB Progress Bar<\/strong><\/h2>\n\n\n\n<p>To activate this <a href=\"https:\/\/essential-blocks.com\/#\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Essential Blocks<\/strong><\/a> element, click on the \u2018+\u2019 icon to add a new Block. Afterward, find&nbsp; <strong>&#8216;Progress Bar&#8217;<\/strong> from the search option. Simply just click on the Block and it will be activated.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1366\" height=\"608\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/1-4.png\" alt=\"EB Progress Bar\" class=\"wp-image-284\" title=\"\" srcset=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/1-4.png 1366w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/1-4-600x267.png 600w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/1-4-300x134.png 300w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/1-4-1024x456.png 1024w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/1-4-768x342.png 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p>After you are done with this step this is the default layout you are going to see.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1366\" height=\"608\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/2-6.png\" alt=\"EB Progress Bar\" class=\"wp-image-285\" title=\"\" srcset=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/2-6.png 1366w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/2-6-600x267.png 600w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/2-6-300x134.png 300w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/2-6-1024x456.png 1024w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/2-6-768x342.png 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>How to Configure the Layout Settings<\/strong><\/h2>\n\n\n\n<p>From this section, you are able to change the percentage of the <strong>EB Progress Bar <\/strong>with its height. Simply just the slider to increase or decrease the value. You are able to add your own title for the <strong>bar<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1128\" height=\"562\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/3-1.png\" alt=\"EB Progress Bar\" class=\"wp-image-286\" title=\"\" srcset=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/3-1.png 1128w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/3-1-600x299.png 600w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/3-1-300x149.png 300w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/3-1-1024x510.png 1024w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/3-1-768x383.png 768w\" sizes=\"(max-width: 1128px) 100vw, 1128px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p><br>Besides, you can use the toggle to display or hide the Title and Percentage. By default, the percentage is shown in a tooltip. If you wish, you can display it inline by turning on the toggle \u2018Inline Percentage\u2019. You can even apply Gradient Color for the block. <\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>How to Style EB Progress Bar<\/strong><\/h2>\n\n\n\n<p>You have the freedom to change the Title Text and the font size of your Title for the <strong>bar<\/strong>. You can also change the color of the Title, Tooltip, Percentage, and the Background color for the <strong>EB Progress Bar<\/strong>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1366\" height=\"625\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/4-3.gif\" alt=\"EB Progress Bar\" class=\"wp-image-287\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p><br>On the other hand, for Gradient Color, you can either choose it to be Linear or Radial. You can add your preferred first and second colors. <\/p>\n\n\n\n<p>Moreover, you have the flexibility to change the position of both colors as well. If you wish, you can even change the angle for how you want your gradient colors to display.<\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>Final Outcome<\/strong><\/h2>\n\n\n\n<p>By following the basic steps and a bit more modifying, you can style your <strong>EB<\/strong> <strong>Progress Bar<\/strong> however you want.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"792\" height=\"321\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/screely-1590041008464.png\" alt=\"EB Progress Bar\" class=\"wp-image-487\" title=\"\" srcset=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/screely-1590041008464.png 792w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/screely-1590041008464-600x243.png 600w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/screely-1590041008464-300x122.png 300w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/screely-1590041008464-768x311.png 768w\" sizes=\"(max-width: 792px) 100vw, 792px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p>With the help of<strong> EB Progress Bar <\/strong>from <strong>Essential Blocks<\/strong>, this is how you can showcase your skills or a key information about your business and grab everyone\u2019s attention.<\/p>\n\n\n\n<p>Getting stuck? Feel free to <a href=\"https:\/\/wpdeveloper.net\/support\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Contact Our Support<\/strong><\/a> for further assistance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use EB Progress Bar block from Essential Blocks for Gutenberg to visualize progression in an attractive way.<\/p>\n","protected":false},"author":1,"featured_media":487,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","footnotes":""},"doc_category":[162],"doc_tag":[14,19,15,22,12,13,21,20,16],"class_list":["post-283","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-creative-blocks","doc_tag-block","doc_tag-block-library","doc_tag-blocks","doc_tag-building-block","doc_tag-gutenberg","doc_tag-gutenberg-block","doc_tag-gutenberg-editor","doc_tag-page-building-blocks","doc_tag-wordpress"],"year_month":"2026-06","word_count":367,"total_views":"7798","reactions":{"happy":"3","normal":"0","sad":"1"},"author_info":{"name":"admin","author_nicename":"wpdev","author_url":"https:\/\/essential-blocks.com\/author\/wpdev\/"},"doc_category_info":[{"term_name":"Creative Blocks","term_url":"https:\/\/essential-blocks.com\/docs-category\/creative-blocks\/"}],"doc_tag_info":[{"term_name":"block","term_url":"https:\/\/essential-blocks.com\/docs-tag\/block\/"},{"term_name":"block library","term_url":"https:\/\/essential-blocks.com\/docs-tag\/block-library\/"},{"term_name":"blocks","term_url":"https:\/\/essential-blocks.com\/docs-tag\/blocks\/"},{"term_name":"Building Block","term_url":"https:\/\/essential-blocks.com\/docs-tag\/building-block\/"},{"term_name":"gutenberg","term_url":"https:\/\/essential-blocks.com\/docs-tag\/gutenberg\/"},{"term_name":"gutenberg block","term_url":"https:\/\/essential-blocks.com\/docs-tag\/gutenberg-block\/"},{"term_name":"Gutenberg editor","term_url":"https:\/\/essential-blocks.com\/docs-tag\/gutenberg-editor\/"},{"term_name":"Page Building Blocks","term_url":"https:\/\/essential-blocks.com\/docs-tag\/page-building-blocks\/"},{"term_name":"WordPress","term_url":"https:\/\/essential-blocks.com\/docs-tag\/wordpress\/"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":8,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/283\/revisions"}],"predecessor-version":[{"id":6093,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/283\/revisions\/6093"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/media\/487"}],"wp:attachment":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/media?parent=283"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/doc_category?post=283"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/doc_tag?post=283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}