---
title: "Reading Progress Bar Element"
date: 2025-05-07
author: "Jeroen Moolenschot"
---

# Reading Progress Bar Element

Encourage site visitors to keep scrolling your page and read your whole content with the Reading Progress Bar. This element lets you add a progress bar on top of your site. You can even style it any way you want to make it look attractive.

 In YOOtheme builder or templates you can Select new elements to create your pages.   
Go to **YOOtheme > Layout > Footer** to add this element to all pages.  
In this popup you will see the Joomill Extensions section with all available elements.

 ![yootheme elements](https://www.joomill-extensions.com/images/documentation/yoothemeelements/yootheme-elements.jpg)

 Select the Reading Progress Bar element.

 ![empty content](https://www.joomill-extensions.com/images/documentation/yoothemeelements/readingprogressbar-content.jpg)

 **Content Tab**

 
|  |  |
| --- | --- |
| Color | Select the color of the progress bar. You can select any color you want with the color picker. |
| Background | Select the backgroundcolor of the progress bar. You can select any color you want with the color picker. |
| Height | Set the height of the progress bar. |
| Position | Select the position of the progress bar. You can choose: Top or Bottom. |

  

  ![empty content](https://www.joomill-extensions.com/images/documentation/yoothemeelements/readingprogressbar-settings.jpg)

 **Settings Tab**

 
|  |  |
| --- | --- |
| Visibility | Choose where you would like to show the empty element.  
You can choose from:  
- Show Always  
- Visible Small (Phone Landscape)  
- Visible Medium (Tablet Landscape)  
- Visible Large (Desktop)  
- Visible X-Large (Large Screens)  
- Hidden Small (Phone Landscape)  
- Hidden Medium (Tablet Landscape)  
- Hidden Large (Desktop)  
- Hidden X-Large (Large Screens) |

 **Demo**

 See the top of this page.