---
title: "Progress Bar: Add a Static Progress Indicator to Your Pages"
slug: "progress-bar-add-a-static-progress-indicator-to-your-pages"
description: "Learn how to customize the Progress Bar element in ClickFunnels to visually represent user progress on your pages and enhance engagement effectively."
tags: ["navigation", "editor", "progress-bar"]
updated: 2025-06-13T18:10:22Z
published: 2025-06-13T18:10:22Z
canonical: "support.myclickfunnels.com/progress-bar-add-a-static-progress-indicator-to-your-pages"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.myclickfunnels.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Progress Bar: Add a Static Progress Indicator to Your Pages

The **Progress Bar** element is a static navigation tool that visually represents the progression of an action or process on a page. This element can be customized to display progress based on a predefined percentage, providing a visual cue for users. It is commonly used in funnels, opt-in pages, or any other static page where progress needs to be represented. This article will explain how to use the Progress Bar element in the pages. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(352).png)

---

## Requirements

- An active ClickFunnels account
- A page created in your workspace

---

## Adding a Progress Bar Element in the Page Editor

1. Inside the page editor, add a **Section** where you want to place the element.
2. Add a **Row** within that section.
3. Click the orange **+** **Plus** or **Add New Element** button inside the row to insert a new element.
4. From the **Navigation** category, select the **Progress Bar** element. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(353).png)

Once the **Progress Bar** element is added, you can customize its appearance to fit your page design.

> [!WARNING]
> Important:
> 
> If you're looking to display dynamic progress for courses, consider using the **Course Progress Bar** element instead, as it automatically updates based on user activity within a course structure.

---

## How the Progress Bar Element Works

The Progress Bar is a **static** element. This means it does not dynamically change based on user interaction or activity. Instead, it displays a fixed progress percentage you manually configure in its settings.

1. **Static Progress**: You can define the percentage in the settings, and the progress bar will visually represent the completion level you specify. For example, setting the percentage to **90%** will indicate that 90% of the process is complete.
2. **Use Cases**: This element is especially useful in certain scenarios, such as on upsell or downsell pages, where you might want to create a sense of urgency or scarcity. For instance, you can include a progress bar with text like “Almost Complete…” to remind users that their checkout journey is not yet finished. It can also be used effectively on opt-in or funnel pages to guide users through a process and improve their engagement visually.

---

## Customizing the Progress Bar Element

When you hover over an element, its border will be highlighted in orange. To access an element's settings, click on the **gear** **⚙️ icon** or click directly on the element. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1731538243619.png)

### Top Margin

![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1751891362357.png)The **Top Margin** setting lets you control the space between the current container (section, row, flex, and element) and the container directly above it. If no previous container exists, the margin will be applied relative to the parent container. If no preceding container is added, the **Body** will be the parent. You can set top margin values independently for desktop and mobile by using the device icons (🖥️ & 📱 ). If no mobile value is specified, it will inherit the desktop setting by default. Use the slider or manually enter a value in pixels (`px`) or percentage (`%`) to create consistent spacing across screen sizes.

![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1748441653595.png)

### Progress Bar Settings

![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-17DBJI33.png)

1. **Percentage**: Manually set the progress percentage to display on the bar.
2. **Background**: Set the background color for the bar’s container.
3. **Progress Background**: Define the color of the progress bar itself for clear visibility.
4. **Text**: Add custom text to display within or near the progress bar (e.g., "Almost Complete...").
5. **Text Placement**: Choose where the text appears: inside or outside the progress bar.
6. **Height and Width**: Adjust the dimensions of the progress bar to fit your page layout.

### Corner

The **Corner** settings let you adjust the roundness (border-radius) of an element's corners, providing flexibility to create either rounded or sharp edges:

![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(77).png)

1. **Style Presets (1, 2, 3):** Choose from predefined corner styles set in your Style Guide. These presets (1, 2, or 3) offer quick styling options that align with your page’s overall design.
2. **Edit Style:** To modify a style directly in the Style Guide (affecting all elements using that style), click **Edit Style** to adjust the preset in your global settings.
3. **Override:** To apply custom corner settings without changing the Style Guide, click **Override**. This allows you to tailor the corner radius for this specific element only.
4. **All Corners:** Adjust the slider or enter a specific value in pixels or percentages to set a uniform border radius for all four corners.
5. **Separate Edges:** Enable **Separate Edges** to adjust each corner independently. You can set different values for the **Top Left**, **Top Right**, **Bottom Left**, and **Bottom Right** corners to achieve unique shapes.

### Typography

The **Typography** settings allow you to control the appearance of text in your element. These settings provide two views. You can select a predefined style (Small, Medium, or Large) that applies a consistent design across your page. If you select to override the predefined style, additional settings become available, allowing you to customize the text appearance manually.

- **Font Family**: This option allows you to select the font type for your text. ClickFunnels provides a range of popular fonts from the Google Fonts library. Additionally, you can upload and use your own custom fonts by navigating to ***Workspace Settings*** *>* ***My Assets*** *>* ***Fonts***. Once uploaded, your custom fonts will appear in the selection list for use.
- **Weight**: This option defines the thickness of the text. Depending on your desired emphasis, you can choose from **Thin**, **Regular**, or **Bold options**. Thin fonts provide a subtle look, while bold fonts create more visual impact.
- **Font Size**: You can adjust the text size using the slider or manually inputting a specific value. Additionally, you can choose between **rem** or **px** for the size measurement, such as **2rem** or **32px**. You can also set font size values independently for desktop and mobile by using the device icons (🖥️ & 📱 ).
  - **Rem** is a relative unit based on the base font size defined in your style guide. For example, if you select a text size of **2rem** and your style guide specifies a base font size of **16px** for desktop, the resulting text size will be **32px** for desktop view (i.e., 2rem × 16px = 32px).
  - **Px** is an absolute measurement, providing precise control over the text size.
- **Letter Spacing**: Adjust the space between individual letters. You can increase or decrease the value using the slider or input a specific value (measured in **rem**). More spacing spreads the letters apart, while less spacing brings them closer together. You can also set letter spacing values independently for desktop and mobile by using the device icons (🖥️ & 📱 ).
- **Line Height**: Controls the vertical space between lines of text. This is typically expressed as a percentage of the font size. A higher percentage increases the space between lines, improving readability, especially for larger blocks of text. You can also set line height values independently for desktop and mobile by using the device icons (🖥️ & 📱 ).
- **Color**: Use the color picker to select the text color. You can choose a predefined color from the **Style Guide** or create a custom color. When using the **Custom** color picker, you can select the color using the slider or input a specific HEX code. Additionally, you can adjust the **opacity** (Alpha value) using the second slider—moving it to the left reduces the opacity and makes the color more transparent, while moving it to the right makes it fully opaque.
- **Bold**: Similar to the **Color** option, you can select a color for the bold state of the text. This color will be applied when the text is set to bold, allowing you to differentiate it visually from regular text.
- **Link**: Like the **Color** option, you can apply a specific color to text containing a hyperlink. If the text is hyperlinked, the selected color will be used to style the link, helping to make it stand out.
- **Icon Color**: Choose the color of your icons (if applicable) to ensure they match your overall page design.
- **Text Casing**: Select how your text should appear in terms of capitalization:
  - **Lowercase**: All text in lowercase.
  - **Uppercase**: All text in uppercase.
  - **Capitalize**: Capitalize the first letter of each word.
- **Decoration**: Add text decorations such as:
  - **Underline**: Draw a line beneath your text.
  - **Strikethrough**: Cross out your text with a horizontal line.
  - **Overline**: Draw a line above your text.
- **Opacity**: Adjust the opacity of the text. The slider allows you to make the text more or less transparent. Moving the slider to the **left (0)** decreases the opacity (making the text more transparent), while moving it to the **right (1)** makes the text fully opaque.
- **Align**: Set the alignment of your text within its container. Based on your page design, you can choose to align the text to the **left**, **center**, or **right**.

### Shadow

The **Shadow** settings allow you to add depth and emphasis to elements by applying shadow effects, enhancing the visual appearance. Here’s how to customize shadow properties:

![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(79).png)

1. **Style**: Select one of the predefined shadow styles from your page's style guide. Click on the numbered styles (1, 2, or 3) to apply preset shadow settings defined in your style guide.
2. **Shadow Style**: Choose between **Inset** (shadow within the element) and **Outset** (shadow outside the element) to achieve the desired shadow effect.
3. **X-direction**: Adjusts the horizontal positioning of the shadow. A positive value moves the shadow to the right, while a negative value shifts it to the left.
4. **Y-direction**: Controls the vertical placement of the shadow. Positive values push the shadow downward, while negative values pull it upward.
5. **Blur**: Controls the softness of the shadow edges. Higher values create a more diffused, softer shadow, while lower values keep the shadow sharp.
6. **Spread**: Adjust the size of the shadow. Positive values expand the shadow, while negative values make it narrower.
7. **Color**: Use the color picker to choose to set the shadow color.

### Border

The **Border** settings enable you to add and style borders around an element, allowing for enhanced visual definition and separation on the page:

![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(78).png)

1. **Style Presets (1, 2, 3):** Choose from predefined border styles in your Style Guide. These presets provide consistent border styles across your page and can be quickly applied to elements.
2. **Edit Style:** To modify the preset border styles in the Style Guide (affecting all elements using that style), select **Edit Style** to adjust the design in your global settings.
3. **Override:** Use the **Override** option to customize the border settings specifically for this element without impacting the global Style Guide settings.
4. **Borders:** Select which sides of the element should display a border. Options include any combination of top, bottom, left, and right borders.
5. **Border Style:** To fit your design preferences, choose the border's line style, such as solid, dashed, or dotted.
6. **Color:** Use the color picker to select a border color. You can choose a color from the Style Guide or select a custom color, ensuring the border color aligns with your design scheme.
7. **Stroke Size:** You can adjust the border's thickness using the **Stroke Size** slider or by inputting a specific pixel value, creating anything from thin outlines to bold frames.

### Control Panel

The **Control Panel** appears at the bottom of every container(Section, Row, Flex, and Element) in the page editor, offering quick access to essential settings and actions for that container. Here’s what each icon represents: ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(47).png)

- **ALL**: The container will be visible on all devices (desktop, tablet, and mobile).
- **Desktop (**🖥️**) Icon**: The container will only be visible in desktop view.
- **Mobile (**📱**) Icon**: The container will only be visible in mobile view.
- **Eye** **(👁️)** **Icon**: Use this to hide the container from the page. Once clicked, the container will be hidden in the editor but not deleted. You can click the **Layout** menu in the top navigation bar to find the hidden containers. Select All, Desktop, or Mobile icon to unhide in the editor.
- **Code** **(</>)** **Icon**: This icon opens the code editor, where you can insert custom CSS or JavaScript code to modify the container's behavior or styling.
- **Trash (**🗑️**) Icon**: Removes the container from the page editor entirely.

### Advanced Settings

![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1748535637061.png)

To further customize your container (section, row, column, and element), ClickFunnels provides **Advanced** settings that allow you to control style, advanced CSS, animation, and rendering logic. We’ve separated these advanced features into dedicated articles to avoid overwhelming you with too much content in one place and to keep our documentation concise. Explore the following resources for more details:

- [**Advanced Settings - Customize Styles**](/v1/docs/advanced-settings-customize-styles): Learn how to populate contents dynamically, position containers, and apply z-index.
- [**Advanced Settings - Customize Animation**](/v1/docs/advanced-settings-customize-animation): Learn how to add animations, control entry and exit effects, and adjust animation delay.
- [**Advanced Settings - Customize Logic**](/v1/docs/advanced-settings-customize-logic): Learn how to apply conditional logic to elements and add custom attributes.

## Related

- [Getting Started with Styles](/getting-started-with-styles.md)
- [Getting Started with Courses](/getting-started-with-courses.md)
- [(Collections) Courses: Arrange and Display Available Courses](/collections-courses-arrange-and-display-available-courses.md)