--- title: "How to Add a Progress Bar in WordPress?" url: https://nexterwp.com/docs/add-a-progress-bar-in-wordpress/ date: 2024-12-24 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "A percentage in a sentence is easy to skip. The same number as a bar is read at a glance, which is why skill lists and completion meters are drawn..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Progress-Bar-in-WordPress_-1024x519.jpg word_count: 495 --- # How to Add a Progress Bar in WordPress? ## Key Takeaways - Progress Bar block renders a labeled bar or circle with a title, a value, and optional supporting text in Nexter Blocks. - Circle layout takes a fraction, not a percentage: 0.4 renders as 40% and the default 0.7 renders as 70%. - Display Number off leaves a stray % sign, so the number stays on or the symbol is removed too until the issue is fixed. A percentage in a sentence is easy to skip. The same number as a bar is read at a glance, which is why skill lists and completion meters are drawn rather than written. The Progress Bar block draws one, with a label, a value and a choice of bar or circle. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-progress-bar/) ## Before You Start - **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Progress Bar, switched on under **Nexter > Blocks** in your WordPress dashboard. ## Video Tutorial https://www.youtube.com/watch?v=httNb2XU48Q ## Steps - Add the **Progress Bar** block to your page. ![Adding the Progress Bar block](https://nexterwp.com/wp-content/uploads/2024/12/progress-bar-activate-new-1.webp) - Choose the **layout** — a horizontal bar or a circle. ![Choosing the progress bar layout](https://nexterwp.com/wp-content/uploads/2024/12/progress-bar-design-type.webp) - Set the **value** the bar should fill to. ![Nexter Blocks editor, Progress Bar block, Layout panel with Select Layout, Style, Height, Title, Sub Title, Value and Display Number](https://nexterwp.com/wp-content/uploads/2026/09/progress-bar-panel-layout.webp) - Enter the **title** and any supporting text. ![Nexter Blocks editor, Progress Bar block, Icon/Image panel in the Layout tab](https://nexterwp.com/wp-content/uploads/2026/09/progress-bar-panel-icon-image.webp) - Style the bar's height, colours and the number, then publish. ![Nexter Blocks editor, Progress Bar block, Style tab with the Progress Bar panel open](https://nexterwp.com/wp-content/uploads/2026/09/progress-bar-panel-style.webp) ## How It Behaves The block renders a labelled bar whose fill and number come from the value you set. - **The value is what is displayed.** Measured on published pages: the default rendered `69%` and setting 42 rendered `42%`, alongside the title and description.- **Two layouts, measured.** The bar layout renders a horizontal bar about 55 pixels tall with the label beside it; the circle layout renders a round chart around 269 pixels tall.- **The circle takes its value differently** — measured, it is entered as a fraction and rendered as a percentage: 0.4 rendered **40%** and the default 0.7 rendered **70%**. See the [circle progress bar guide](https://nexterwp.com/docs/create-circle-progress-bar-in-wordpress/).- Measured with Nexter Blocks Pro deactivated: this block renders identically. It is a free block. ## Limitations - **Switching the number off leaves the percent sign behind.** Measured: with Display Number off the bar rendered a bare `%` with no figure in front of it. Until this is fixed, leave the number on, or clear the symbol as well. This is reported to the development team.- **The value is typed, not calculated.** The bar does not track anything — it shows the number you enter, so it has to be updated by hand.- **One bar per block.** A list of skills means one block per skill.- Percentages imply precision. A bar at 87% invites the question of what was measured. ## Troubleshooting ### There is a stray % sign with no number That is the Display Number setting switched off. Measured: the number is hidden but the symbol is still printed. Switch the number back on, or remove the symbol too. Reported to the development team. ### My circle shows the wrong percentage The circle value is a fraction, not a percentage. Measured: 0.4 renders as 40%. Enter 0.85 for 85%, not 85. ### The bar does not animate Check you are viewing the published page rather than the editor, and that the bar is scrolled into view — the fill animates when it appears. ### The bar is too thin or too thick Set the height on the block. The bar and circle layouts have their own size controls. ## Related Docs - [Create a circle progress bar in WordPress](https://nexterwp.com/docs/create-circle-progress-bar-in-wordpress/)- [Add an interactive circle in WordPress](https://nexterwp.com/docs/add-an-interactive-circle-in-wordpress/)- [Add pro buttons in WordPress](https://nexterwp.com/docs/add-pro-buttons-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before adding a progress bar in WordPress with Nexter Blocks?** A: The Progress Bar block is a free block in Nexter Blocks, and it works in both the free version and Nexter Blocks Pro. The key prerequisite is that the block must be enabled under Nexter > Blocks in your WordPress dashboard. That matters because the tutorial is about a block-based setup, not a separate plugin workflow, so if the block is switched off you will not be able to add it to a page. **Q: Can I use the Progress Bar block for a circle chart instead of a horizontal bar?** A: The block supports both layouts, so it can be used for either a horizontal bar or a circle. That makes it useful when you want a compact visual meter instead of a long bar, especially for skill lists or completion-style displays. The circle layout behaves differently from the bar layout because its value is entered as a fraction and then rendered as a percentage, which is easy to miss if you expect to type 85 for 85%. **Q: Why does my circle progress bar show the wrong percentage?** A: The circle uses fractional input, not direct percentage input. In the measured example, 0.4 renders as 40% and 0.85 renders as 85%, so typing 85 would be interpreted incorrectly. That difference is the main gotcha with the circle layout in Nexter Blocks, and it is why the [circle progress bar guide](https://nexterwp.com/docs/create-circle-progress-bar-in-wordpress/) is relevant when you want the number to match what visitors see. **Q: Why is there a % sign with no number in my progress bar?** A: That happens when Display Number is switched off. The page notes that the number disappears but the percent symbol can still remain, so you end up with a bare % on the front end. The practical fix is to turn the number back on or remove the symbol too. This behavior was measured on published pages and has been reported to the development team. **Q: Why isn’t my progress bar animating on the page?** A: The fill animation appears when the bar scrolls into view on the published page, not while you are staring at it in the editor. That means two things matter: test on the live page and make sure the block actually enters the viewport. If it still looks static in the editor, that can be normal because the animation trigger depends on how it appears on screen.