---
title: "How to Add a Progress Bar in WordPress?"
url: https://qa.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://qa.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 plugin provides a Progress Bar block for displaying data and stats attractively in WordPress.
- Users can create linear and circular progress bars, customize styles, and select multiple image types for the Progress Bar block.
- The Progress Bar block allows users to set values between 0-100, manage title and subtitle styles, and customize icon positions.

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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.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://qa.nexterwp.com/docs/add-tabs-on-wordpress/)