---
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-04-14
author: "Aditya Sharma"
description: "The Progress Bar block from the Nexter Blocks helps you show data and stats in a fun and attractive way, making it easier to share information with your audience. LIVE..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Progress-Bar-in-WordPress_-1024x519.jpg
word_count: 558
---

# 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.

The Progress Bar block from the Nexter Blocks helps you show data and stats in a fun and attractive way, making it easier to share information with your audience.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-progress-bar/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- Make sure the Progress Bar block is activated, to verify this visit Nexter → Blocks → and Search for Progress Bar and activate.

## Learn via Video Tutorial

https://www.youtube.com/watch?v=httNb2XU48Q

## How to activate the Progress Bar Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block name** **and** turn on the toggle**.

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

## Key Features

- **Bar Progress - **You can easily add linear progress bars.

- **Circle Progress: **You can [create circular progress bars](https://nexterwp.com/docs/create-circle-progress-bar-in-wordpress/).

- **Multiple Styles** - You can add multiple styles for progress bars.

- **Multiple Image Type** -  You can select multiple types of Image/Icon for the progress bar.

## How to Use the Progress Bar Block?

Add the Progress Bar block to the page.

Then click on the **Design from Scratch** button to design the layout from scratch.

![](https://nexterwp.com/wp-content/uploads/2024/12/progress-bar-design-type-1024x190.png)

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

### Layout

From the **Select Layout** section, you have to select the layout type. Here you’ll find two options – 

- **Progress Bar** - To add a line progress bar.

- **Pie Chart** - To add a circle progress bar.

Let’s select **Progress Bar** here.

Then, from the **Style** section, you can select a style for the progress bar.*
*
From **Title**, you can add a title for the progress bar.

From **Sub Title**, you can add a subtitle for the progress bar.

After that in the **Value (0-100)** field, you have to set a value between 0 and 100 that will control how much of the progress bar is filled in.

From the **Display Number** toggle, you can show or hide the Value from the progress bar.

In the **Symbol **field, you can add a symbol to the progress bar.

With the **Symbol Position** section, you can select whether the symbol appears before or after the progress bar.

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

### Icon/Image

From here you can add an icon for the progress bar.

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

From the **Icon Type** section, you can select the icon type. Here you’ll find three options – 

- **None** - To add no icon in the progress bar.

- **Icon** – You can add Font Awesome icons and text in this option.

- **Image** - In this option, you can use an image with text.

After that, from the **Position **section, you can select whether the icon appears before or after the progress bar.

## How to Style the Progress Bar Block?

To style the Progress Bar, you’ll find all the options in the Style tab.

**Progress Bar **-**  **From here, you can manage the top margin and add background color to the progress bar.

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

**Title **-  From here, you can manage the title style.

**Sub Title **-**  **From here, you can manage the sub-title style.

**Number **-**  **From here, you can manage the number style. You can change the typography and number color.

**Number Prefix/Postfix **-**  **From here, you can manage the symbol style in the progress bar.

**Icon/Image **-** **From here, you can manage the icon style**.**

Advanced options remain common for all our blocks, you can explore all it options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-tabs-on-wordpress/)