{"id":102858,"date":"2025-11-24T12:30:00","date_gmt":"2025-11-24T12:30:00","guid":{"rendered":"https:\/\/wpmet.com\/?p=102858"},"modified":"2025-11-17T05:32:16","modified_gmt":"2025-11-17T05:32:16","slug":"add-progress-bar-to-wordpress","status":"publish","type":"post","link":"https:\/\/wpmet.com\/add-progress-bar-to-wordpress\/","title":{"rendered":"How to Add Progress Bar to WordPress With Elementor"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Are you also feeling irritated when you are reading a long text or blog online without knowing how far you\u2019ve gone and when you can finish it?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We feel you!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Progress bar is the new trend now! It indicates time, a project milestone, and even stunningly displays daily sales. Progress bar taps natural desire for completion.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s a whisperer, \u201cYou\u2019re almost there, keep going!\u201d \u201cThere are so many great deals and items on sale, hurry up!\u201d<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this guide, we\u2019ll show you step by step <strong>how to add progress bar to WordPress<\/strong> and customize and customize it with a single plugin and Elementor. You\u2019ll get creative ideas to make it pop like wow! By the end, you\u2019ll turn an ordinary section of your website into an engaging, goal-driven experience your visitors will love.<\/p>\n\n\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-border-color has-background is-vertical is-layout-flex wp-container-core-group-is-layout-5d1a3871 wp-block-group-is-layout-flex\" style=\"border-color:#2cacff;border-width:2px;border-radius:8px;background-color:#f9fdff;margin-bottom:50px;padding-bottom:0px;line-height:1.5\">\n<p class=\"wp-block-paragraph\"><strong>Quick Overview<\/strong><br>A Progress Bar is a visual engagement tool that taps into the desire for completion, showing progress toward a goal (e.g., reading a blog, reaching a sales target, or displaying skills).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tools Used:<\/strong> Elementor and ElementsKit<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Key Steps:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> <strong>\u2705 <\/strong>Enable the Progress Bar Widget in the ElementsKit settings.<br> <strong>\u2705 <\/strong>Configure in Elementor: Drag and drop the Progress Bar widget onto your page.<br> <strong>\u2705 <\/strong>Customize Styles: Use the Style and Advanced settings to adjust colors, typography, angles, bar and track appearance, and more, offering both linear and radial options.<br> <strong>\u2705 <\/strong>Preview and Publish to make it live.<\/p>\n<\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What are Progress Bars in WordPress?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A progress bar is a graphical element that represents <strong>progress toward a goal or percentage completion of a task<\/strong>. In WordPress, progress bars can be used to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Show skills or competencies (e.g., \u201cHTML \u2013 90%\u201d)<br><\/li>\n\n\n\n<li>Represent project milestones or timelines<br><\/li>\n\n\n\n<li>Visualize statistics like sales targets or fundraising goals<br><\/li>\n\n\n\n<li>Enhance the storytelling aspect of your website<br><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">They provide <strong>quick<\/strong>, <strong>visual feedback<\/strong> to your visitors and make your <strong>site more engaging<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">When to Add Progress Bar?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Progress bars aren\u2019t for every page, but they shine when you need to visually communicate progress or performance. Consider adding them when you want to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Highlight team expertise on a portfolio or \u201c<strong>About U<\/strong>s\u201d page<br><\/li>\n\n\n\n<li>Display ongoing campaign progress for donations or crowdfunding<br><\/li>\n\n\n\n<li>Show learning progress in online courses or training websites<br><\/li>\n\n\n\n<li>Add interactivity to dashboards or service pages<br><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If used thoughtfully, progress bars can keep users engaged and help build trust by showing measurable progress.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add Progress Bar to WordPress<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">One of the easiest ways to add progress bars in Elementor is by using <a href=\"https:\/\/wpmet.com\/plugin\/elementskit\/progressbar\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>ElementsKit<\/strong><\/a>, a popular <strong>Elementor add-on<\/strong>. It offers ready-to-use widgets, including <strong>customizable progress bar templates<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The progress bar feature is offered for free. You only need these:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Working WordPress website. <\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Installed and activated Elementor<\/a> (free version).<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wpmet.com\/doc\/how-to-purchase-and-activate-elementskit-pro-license\/\" target=\"_blank\" rel=\"noreferrer noopener\">Installed and activated ElementsKit<\/a>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Now, here\u2019s the actual process:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Enable Progress Bar Widget<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In your WordPress dashboard, navigate to <strong>ElementsKit <\/strong>and open <strong>widgets<\/strong>. Then look for the Progress Bar. Enable it and save changes.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1536\" height=\"725\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Enable_Progress_Bar_Widget-1.avif\" alt=\"Enable Progress Bar Widget\" class=\"wp-image-103001\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Enable_Progress_Bar_Widget-1.avif 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Enable_Progress_Bar_Widget-1-768x363.avif 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Enable_Progress_Bar_Widget-1-18x8.avif 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Enable_Progress_Bar_Widget-1-360x170.avif 360w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure Progress Bar in Elementor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Once the widget is enabled, <strong>add a new page and open the Elementor editor<\/strong> by clicking on Edit with Elementor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1453\" height=\"828\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Open_new_page_with_Elementor_for_Progress_Bar_widget.avif\" alt=\"Open a page with Elementor\" class=\"wp-image-102999\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Open_new_page_with_Elementor_for_Progress_Bar_widget.avif 1453w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Open_new_page_with_Elementor_for_Progress_Bar_widget-768x438.avif 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Open_new_page_with_Elementor_for_Progress_Bar_widget-18x10.avif 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Open_new_page_with_Elementor_for_Progress_Bar_widget-360x205.avif 360w\" sizes=\"(max-width: 1453px) 100vw, 1453px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Then, search for the <strong>Progress Bar widget<\/strong> in the search bar. Drag it and drop it at the center.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"727\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Add_progress_bar_widget.avif\" alt=\"Add progress bar widget\" class=\"wp-image-103000\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Add_progress_bar_widget.avif 1600w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Add_progress_bar_widget-768x349.avif 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Add_progress_bar_widget-1536x698.avif 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Add_progress_bar_widget-18x8.avif 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Add_progress_bar_widget-360x164.avif 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can also change the <strong>title of your progress bar<\/strong> in the content tab, as well as the <strong>style<\/strong>, <strong>percentage<\/strong>, and <strong>animation duration<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1547\" height=\"777\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Progress_bar_settings.avif\" alt=\"Progress bar settings\" class=\"wp-image-103002\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Progress_bar_settings.avif 1547w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Progress_bar_settings-768x386.avif 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Progress_bar_settings-1536x771.avif 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Progress_bar_settings-18x9.avif 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Progress_bar_settings-360x181.avif 360w\" sizes=\"(max-width: 1547px) 100vw, 1547px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Customize Progress Bar Styles<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To match your website branding, you can customize your progress bar through the style and advanced settings sections.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the style section, you can set the background of your progress bar including all the parameters such as, <strong>bar<\/strong>, <strong>track<\/strong>, <strong>title<\/strong>, and <strong>percent<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"735\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Customize_progress_bar_style.avif\" alt=\"Customize progress bar style\" class=\"wp-image-103003\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Customize_progress_bar_style.avif 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Customize_progress_bar_style-768x368.avif 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Customize_progress_bar_style-18x9.avif 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Customize_progress_bar_style-360x172.avif 360w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For example, you want to customize the look of your bar. You can do it by selecting the Bar and customizing the desired primary and secondary background color. Additionally, you can adjust the <strong>type<\/strong>, <strong>angle<\/strong>, <strong>height<\/strong>, <strong>border<\/strong>, <strong>padding<\/strong>, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"719\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_bar.avif\" alt=\"Styling Bar\" class=\"wp-image-103004\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_bar.avif 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_bar-768x360.avif 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_bar-18x8.avif 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_bar-360x169.avif 360w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now, you can also customize the track of your progress bar. You can set its <strong>background type<\/strong>, <strong>color<\/strong>, and <strong>type<\/strong>.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1826\" height=\"835\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_track-1.avif\" alt=\"Styling Track\" class=\"wp-image-103005\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_track-1.avif 1826w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_track-1-768x351.avif 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_track-1-1536x702.avif 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_track-1-18x8.avif 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_track-1-360x165.avif 360w\" sizes=\"(max-width: 1826px) 100vw, 1826px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you select the <strong>radial type<\/strong>, you need to select its position from many options, such as <strong>bottom cente<\/strong>r, <strong>top right<\/strong>, <strong>top left<\/strong>, <strong>center right<\/strong>, etc.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1479\" height=\"796\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Radial_type_track.avif\" alt=\"Radial type track\" class=\"wp-image-103007\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Radial_type_track.avif 1479w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Radial_type_track-768x413.avif 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Radial_type_track-18x10.avif 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Radial_type_track-360x194.avif 360w\" sizes=\"(max-width: 1479px) 100vw, 1479px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Whereas <strong>linear type<\/strong> allows you to <strong>set the angle<\/strong>.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1495\" height=\"706\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Linear_type_track.avif\" alt=\"Linear type track\" class=\"wp-image-103008\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Linear_type_track.avif 1495w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Linear_type_track-768x363.avif 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Linear_type_track-18x9.avif 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Linear_type_track-360x170.avif 360w\" sizes=\"(max-width: 1495px) 100vw, 1495px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Moreover, ElementsKit allows you to make the title of your progress bar looks stunning. You can choose its <strong>color and typography style<\/strong>, <strong>add text shado<\/strong>w, and even <strong>adjust its margin<\/strong> to the track of your progress bar.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1508\" height=\"786\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_progress_bar_title.avif\" alt=\"Styling Progress Bar Title\" class=\"wp-image-103009\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_progress_bar_title.avif 1508w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_progress_bar_title-768x400.avif 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_progress_bar_title-18x9.avif 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_progress_bar_title-360x188.avif 360w\" sizes=\"(max-width: 1508px) 100vw, 1508px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can choose the <strong>typography of the title<\/strong> from various options, like <strong>Arial<\/strong>, <strong>Tahoma<\/strong>, <strong>Verdana<\/strong>, etc. You can set the <strong>size of the tex<\/strong>t, <strong>weight<\/strong>, <strong>transform<\/strong>, <strong>style<\/strong>, <strong>decoration<\/strong>, <strong>line height<\/strong>, <strong>letter spacing<\/strong>, and <strong>word spacing<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1560\" height=\"771\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Select_typography_style_for_title.avif\" alt=\"Select typography style for title\" class=\"wp-image-103010\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Select_typography_style_for_title.avif 1560w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Select_typography_style_for_title-768x380.avif 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Select_typography_style_for_title-1536x759.avif 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Select_typography_style_for_title-18x9.avif 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Select_typography_style_for_title-360x178.avif 360w\" sizes=\"(max-width: 1560px) 100vw, 1560px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to <strong>customize the percent<\/strong>, simply open the Percent section and play with the elements such as <strong>percent color<\/strong>, <strong>background color<\/strong>, <strong>typography<\/strong>, <strong>text shadow<\/strong>, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1507\" height=\"733\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_percent_of_progress_bar.avif\" alt=\"Style percentage of progress bar\" class=\"wp-image-103011\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_percent_of_progress_bar.avif 1507w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_percent_of_progress_bar-768x374.avif 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_percent_of_progress_bar-18x9.avif 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Styling_percent_of_progress_bar-360x175.avif 360w\" sizes=\"(max-width: 1507px) 100vw, 1507px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To fully enhance the appearance of your progress bar, the advanced settings section may guide you with the steps. In the advanced settings, you can further enhance the appearance of your progress bar. You may add effects, sticky,\u00a0change the glass morphism, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1581\" height=\"743\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Advanced_settings_for_progress_bar.avif\" alt=\"Advanced settings for progress bar\" class=\"wp-image-103012\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Advanced_settings_for_progress_bar.avif 1581w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Advanced_settings_for_progress_bar-768x361.avif 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Advanced_settings_for_progress_bar-1536x722.avif 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Advanced_settings_for_progress_bar-18x8.avif 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Advanced_settings_for_progress_bar-360x169.avif 360w\" sizes=\"(max-width: 1581px) 100vw, 1581px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Preview and Publish<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">After customizing your progress bar, don\u2019t forget to <strong>preview your page<\/strong> to see if it needs revision, responsiveness, and animations across all forms of devices. Once you are satisfied with the design, <strong>click on publish<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1911\" height=\"739\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Preview_and_publish_progress_bar.avif\" alt=\"Preview and publish progress bar\" class=\"wp-image-103013\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Preview_and_publish_progress_bar.avif 1911w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Preview_and_publish_progress_bar-768x297.avif 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Preview_and_publish_progress_bar-1536x594.avif 1536w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Preview_and_publish_progress_bar-18x7.avif 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Preview_and_publish_progress_bar-360x139.avif 360w\" sizes=\"(max-width: 1911px) 100vw, 1911px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Your progress bar is now live on your WordPress site!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"631\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Progress_bar_on_live.avif\" alt=\"Progress bar on live\" class=\"wp-image-103014\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Progress_bar_on_live.avif 940w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Progress_bar_on_live-768x516.avif 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Progress_bar_on_live-18x12.avif 18w, https:\/\/wpmet.com\/wp-content\/uploads\/2025\/11\/Progress_bar_on_live-360x242.avif 360w\" sizes=\"(max-width: 940px) 100vw, 940px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/wpmet.com\/deals\/\" target=\"_blank\" rel=\" noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"300\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2025\/08\/insider20.gif\" alt=\"\" class=\"wp-image-96371\"\/><\/a><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">FAQs<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q1: Do you need Elementor Pro to add progress bars?<\/strong><strong><br><\/strong>No, you can use ElementsKit with the free version of Elementor. ElementsKit works perfectly with the free setup.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q2: Can you add multiple progress bars on one page?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. You can add as many progress bars as needed. For example, create a skillset section with multiple bars representing different competencies.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q3: Will progress bars slow down my site?<\/strong><strong><br><\/strong>Not at all. Progress bars are lightweight and optimized. Just make sure not to overload your page with too many animations.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q4: Can you use circular progress bars instead of linear ones?<\/strong><strong><br><\/strong>Yes, ElementsKit offers both linear and circular progress bar options, giving you flexibility in design.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-hello-gutenkit-black-color has-pale-cyan-blue-background-color has-text-color has-background has-link-color wp-elements-2984969231e6ada0bae12c769004a924 wp-block-paragraph\"><br><strong>Interested what ElementsKit can do you to your website? The resources below are right just for you&#8230;&#8230;&#8230;<br>\ud83d\udc49 <a href=\"https:\/\/wpmet.com\/add-lottie-animations-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to add Lottie Animations in WordPress<\/a><br>\ud83d\udc49 <a href=\"https:\/\/wpmet.com\/feature-boxes-with-icons\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Add Feature Boxes With Icons in WordPress<\/a><br>\ud83d\udc49 <a href=\"https:\/\/wpmet.com\/create-stylish-list-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create Stylish List in WordPress<br><\/a><\/strong><br><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Don\u2019t Think Twice, Start it Now<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Progress bars not only make your WordPress website look modern but also convey important information at a glance. With <strong>Elementor and ElementsKit<\/strong>, you don\u2019t need coding skills to create professional, engaging progress bars that improve user experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, don\u2019t wait, add a progress bar to your site today and show your audience the milestones you\u2019ve achieved!<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/wpmet.com\/plugin\/elementskit\/pricing\/\" target=\"_blank\" rel=\" noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2022\/06\/ElementsKit-CTA-Banner-Wpmet.gif\" alt=\"\"\/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Are you also feeling irritated when you are reading a long text or blog online without knowing how far you\u2019ve gone and when you can finish it? We feel you! Progress bar is the new trend now! It indicates time, a project milestone, and even stunningly displays daily sales. Progress bar taps natural desire for [&hellip;]<\/p>\n","protected":false},"author":48,"featured_media":102933,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"enableOnePageScrollInPage":false,"onePageScrollCss":"","onePageScrollSpeed":1000,"onePageScrollAnimation":"easeInOutQuad","onePageScrollShowDotNavigation":true,"onePageScrollNavigation":"scaleUp","onePageScrollNavigationPosition":"right","onePageScrollNavigationHorizontal":[],"onePageScrollNavigationVertical":[],"onePageScrollNavigationSpacing":[],"onePageScrollNavigationColor":"#00ff0d","onePageScrollNavigationColorHover":"#00ff0d","onePageScrollNavigationColorActive":"#00ff0d","onePageScrollNavigationIcon":[],"onePageScrollNavigationWidth":[],"onePageScrollNavigationWidthHover":[],"onePageScrollNavigationWidthActive":[],"onePageScrollNavigationHeight":[],"onePageScrollNavigationHeightHover":[],"onePageScrollNavigationHeightActive":[],"onePageScrollNavigationBorder":[],"onePageScrollNavigationBorderHover":[],"onePageScrollNavigationBorderActive":[],"onePageScrollNavigationBorderRadius":[],"onePageScrollNavigationBorderRadiusHover":[],"onePageScrollNavigationBorderRadiusActive":[],"onePageScrollNavigationTooltipTypography":[],"onePageScrollNavigationTooltipColor":"#ffffff","onePageScrollNavigationTooltipColorHover":"","onePageScrollNavigationTooltipBgColor":"#00ff0d","onePageScrollNavigationTooltipBgColorHover":"","onePageScrollNavigationTooltipPadding":[],"onePageScrollNavigationTooltipPaddingHover":[],"onePageScrollNavigationTooltipBorderRadius":[],"onePageScrollNavigationTooltipBorderRadiusHover":[],"pageSettingsCustomCss":"","footnotes":""},"categories":[13,19],"tags":[1075],"class_list":["post-102858","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementskit","category-elementor","tag-progress-bar"],"_links":{"self":[{"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/posts\/102858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/users\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/comments?post=102858"}],"version-history":[{"count":0,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/posts\/102858\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/media\/102933"}],"wp:attachment":[{"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/media?parent=102858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/categories?post=102858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/tags?post=102858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}