---
title: "[Marketplace guides and apps] - Progress Bar App Installation Guide"
description: Progress Bar App Installation Guide
url: https://www.contentstack.com/docs/developers/marketplace-apps/progress-bar
product: Contentstack
doc_type: marketplace-guide
audience:
  - developers
  - admins
version: current
last_updated: 2026-03-26
---

# [Marketplace guides and apps] - Progress Bar App Installation Guide

This page explains how to install and configure the Contentstack Progress Bar app from the Marketplace and how to use it inside a stack via Custom Fields. It is intended for Contentstack Owners/Admins and developers who manage stacks and content models, and should be used when you want to add a progress bar custom field to entries.

## Progress Bar App Installation Guide

To further enhance the business user experience, Contentstack provides prebuilt custom field apps that let you extend the functionality of your custom fields to serve your unique business needs while providing a native Contentstack look and feel.

With the Contentstack Progress Bar app and Custom Fields, you can add a progress bar to your entry. With the Progress Bar custom field, you can set the value by sliding the progress bar left or right within the Contentstack entry.

For example:

Progress bars can be very effective for tracking the progress of a survey. You can use the app to store the status of progress in the Contentstack CMS.

## Prerequisites

- [Contentstack account](https://www.contentstack.com/login/)
- Access to the Contentstack Organization/Stack as the Owner/Admin

Let's follow this step-by-step guide to install and configure Progress Bar within your stack.

## Steps for Execution

- [Install and Configure Progress Bar in Contentstack Marketplace](#install-and-configure-progress-bar-in-contentstack-marketplace)
- [Use Progress Bar within your Stack](#use-progress-bar-within-your-stack)

## Install and Configure Progress Bar in Contentstack Marketplace

Follow the steps to install the application in Contentstack.

Log in to your [Contentstack account](https://www.contentstack.com/login/).

- In the left-hand side primary navigation, click the **Marketplace** icon to go to the Marketplace.
- Click **Apps** from the left panel.
- Within the Marketplace, you can see all the available apps. Hover over the **Progress Bar** app and click **Install App**.
- In the popup window, select the stack where you want to install the Progress Bar app and click the **Install** button.
- On the **UI Locations** tab, you can see the predefined app locations. You can use the toggle button corresponding to each UI location to enable or disable it based on your requirements.

**Note**: No additional configuration is required to use the Progress Bar app.

## Use Progress Bar within your Stack

To use the Progress Bar application within an entry of your stack, follow the steps given below:

Go to your stack, click the **Content Models** icon in the left navigation panel, and click the **+ New Content Type** button.

- Create a content type by adding relevant details as displayed below:
- In the Content Type Builder page, add a Custom field in your content type by clicking the **Insert a field** link represented by a **+** sign.
- Under **Select Extension/App**, select **Progress Bar**, and click the **Proceed** button.

Progress Bar is added in the custom field.

- After adding the app in a custom field, click **Save** or **Save and Close** to save your changes.
- To use the Progress Bar app, create an entry for this content type. In the left navigation panel, navigate to the **Entries** page, click **+ New Entry** to create a new entry for the above content type, and then click **Proceed**.

You will see the Progress Bar custom field on your entry page as shown below:

- Hover over the slider to view the progress number. Drag the slider to set the progress.
- After setting the slider, **Save** and **Publish** your entry.

## Common questions

**Q: Do I need to add any configuration settings after installing the Progress Bar app?**  
A: **Note**: No additional configuration is required to use the Progress Bar app.

**Q: Where do I enable or disable the Progress Bar app UI locations?**  
A: On the **UI Locations** tab, you can see the predefined app locations. You can use the toggle button corresponding to each UI location to enable or disable it based on your requirements.

**Q: How do I add the Progress Bar to a content type?**  
A: In the Content Type Builder page, add a Custom field in your content type by clicking the **Insert a field** link represented by a **+** sign, then under **Select Extension/App**, select **Progress Bar**, and click the **Proceed** button.

**Q: How do I set the progress value in an entry?**  
A: Hover over the slider to view the progress number. Drag the slider to set the progress.