---
title: Progress Bar
description: The Progress Bar Block displays a visual progress or skill indicator with a title and percentage value. You can choose between two progress bar styles, set the progress percentage, adjust the bar height, and customize the track, fill color, title,…
url: "https://shapekode.com/product/shapeblock/docs/progress-bar/"
updated: "2026-10-18"
category: Showcase Block
---

# Progress Bar

The Progress Bar Block displays a visual progress or skill indicator with a title and percentage value. You can choose between two progress bar styles, set the progress percentage, adjust the bar height, and customize the track, fill color, title, percentage text, and overall block appearance.

## How to Add a Progress Bar Block

### Step 1: Add the Progress Bar Block

1. Open the page or post where you want to display the progress bar.
2. Click the **+ (Add Block)** button in the Gutenberg editor.
3. Search for **Progress Bar**.
4. Select the Progress Bar Block to insert it into your page.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-116.png)

### Step 2: Configure the Progress Bar Block

Select the Progress Bar Block and open the block settings panel. The available tabs are:

- **Settings:** Choose the progress bar style, enter a title, and set the progress percentage.
- **Layout:** Adjust the height of the progress bar for different devices.
- **Style:** Customize the progress track, filled area, title, and percentage text.
- **Advanced:** Configure the block's spacing, background, and other available advanced settings.

## Settings Tab

### 1. Progress Bar

Configure the content and display style of the progress bar.

- **Select Style:** Choose one of the two available progress bar styles.
  - **Style 1:** Displays the title and percentage above the progress track.
  - **Style 2:** Displays the title above the bar, with the percentage inside the progress bar.
- **Title:** Enter the title displayed with the progress bar, such as “Web Designer” or “Development Skills.”
- **Percent:** Set the progress value from 0 to 100. The filled portion of the bar updates according to this percentage.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-117.png)

## Layout Tab

### 1. Bar Size

Control the height of the progress bar.

- **Height (px):** Set the height of the progress track in pixels. This control supports responsive settings for Desktop, Tablet, and Mobile devices.

## Style Tab

### 1. Progress

Customize the appearance of the progress track and its filled area.

- **Style 1:**
  - **Progress Color (track):** Set the background color or gradient of the unfilled progress track.
  - **Progress Bar Color (fill):** Set the color or gradient of the filled portion of the bar.
- **Style 2:**
  - **Background:** Set the background color or gradient of the progress track.
  - **Progress Bar Color (fill):** Set the color or gradient of the filled portion of the bar.
- **Border Radius (px):** Adjust the roundness of the progress bar corners in pixels.

The available background controls depend on the style selected in the Settings tab.

### 2. Title

Customize the appearance of the progress bar title.

- **Color:** Set the title text color.
- **Typography:** Customize the title typography, including font family, size, weight, style, text transform, line height, and letter spacing. This control supports responsive settings.

### 3. Percent

Customize the appearance of the percentage value.

- **Color:** Set the percentage text color.
- **Typography:** Customize the percentage typography, including font family, size, weight, style, text transform, line height, and letter spacing. This control supports responsive settings.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-118.png)

## Advanced Tab

### 1. Spacing

Control the spacing around the entire Progress Bar Block.

- **Padding:** Set the inner spacing around the block. Responsive settings are available.
- **Margin:** Set the outer spacing around the block. Responsive settings are available.

### 2. Background

Customize the background of the entire Progress Bar Block.

- **Background:** Set a background color or gradient for the block.