---
title: "Reading Progress Bar"
description: "Reading Progress Bar"
url: https://docs.optimizepress.com/en/articles/742-reading-progress-bar
collection: "ThemeBuilder"
updated: 2026-01-08
language: en
---

# Reading Progress Bar

Reading Progress Bar

The Reading Progress Bar element will give your readers a visual clue where they are at in the page and how far along they are in your content. 

## Add the Reading Progress Bar

To add the element, just click the + icon and type in the search "reading" and you'll see it there. This element is unique because you can add it directly to the top of the page without using a section, and it will display the bar at 100% width of the browser. As a quick tip, adding to a section or directly to the page will allow the sticky feature to be turned on for this element.

![](https://staticfiles.gleap.io/helpcenter/6952dad473c72323c1c59109/20251229205944_6395)

## Progress Bar Options

Once you add the element you'll see the element's inline toolbar. The first icon there is where most of the options for this element are located.

![](https://staticfiles.gleap.io/helpcenter/6952dad473c72323c1c59109/20251229205944_2065)

You can change the Progress Height, Content Options, Sticky settings, and also preview in the editor. 

## Reading Progress Bar Color Options

You can change the Background and Progress colors by clicking the color icon (2nd icon in toolbar). 

![](https://staticfiles.gleap.io/helpcenter/6952dad473c72323c1c59109/20251229205944_3435)

## Other Element Options

Other icons in the toolbar will let you set the Borders & Shadows, move the element, clone, delete, and view the advanced options. These work similar to most other elements.