---
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-19
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

- Nexter Blocks Progress Bar block shows data and stats in a fun and attractive way, and it requires the default WordPress Block editor plus the Nexter Blocks plugin installed and activated.
- Progress Bar block offers two layout types, Progress Bar for a line progress bar and Pie Chart for a circle progress bar, with Value set from 0 to 100.
- Progress Bar block supports multiple styles and multiple image type options, including None, Icon for Font Awesome icons and text, and Image for an image with text.

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.png)

- 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-1024x190.png)

- Set the **value** the bar should fill to.

![Setting the progress value](https://nexterwp.com/wp-content/uploads/2024/12/progress-bar-layout-new.png)

- Enter the **title** and any supporting text.

![Adding the title and description](https://nexterwp.com/wp-content/uploads/2024/12/progress-bar-icon-new.png)

- Style the bar's height, colours and the number, then publish.

![Styling the progress bar](https://nexterwp.com/wp-content/uploads/2024/12/progress-bar-style-new.png)

## 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/)