--- title: "How to Add a Reading Progress Bar in WordPress?" url: https://nexterwp.com/docs/add-a-reading-progress-bar-in-wordpress/ date: 2024-12-12 modified: 2026-04-14 author: "Aditya Sharma" description: "Adding a reading progress bar to a WordPress website can improve the user experience. This simple yet powerful tool allows readers to track their progress as they scroll through your..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Reading-Progress-Bar-in-WordPress_-1024x519.jpg word_count: 566 --- # How to Add a Reading Progress Bar in WordPress? ## Key Takeaways - Nexter Blocks includes the Progress Tracker block, allowing users to add three types of reading progress bars: horizontal, vertical, and circular. - The Progress Tracker block can be applied to either the entire page or specific sections, enhancing content navigation. - Users can enable a percentage display in the reading progress bar by toggling the Percentage option in the settings. Adding a reading progress bar to a WordPress website can improve the user experience. This simple yet powerful tool allows readers to track their progress as they scroll through your content, making it easier for them to gauge how much more content remains to be consumed. With the Progress Tracker block from the Nexter Blocks, you can easily add different types of reading progress bars in WordPress. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-reading-scroll-progress-bar) ## Required Setup - Make sure the default WordPress Block editor is active.  - You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated. - Make sure the Progress Tracker block is activated, to verify this visit Nexter → Blocks → and Search for Progress Tracker and activate. ## Learn via Video Tutorial https://www.youtube.com/watch?v=v-NWp6e4-JM ## How to activate the Progress Tracker Block? Go to  - **Nexter **→ **Blocks ** - **Search **the block nameand**turn on the toggle**. ![](https://nexterwp.com/wp-content/uploads/2024/12/progress-tracker-activate-new.png) ## Key Features - **3 Types** - You can select from 3 types of reading scroll progress bar, horizontal, vertical and circular. - **Entire Page** - You can add a reading progress bar to the entire page. - **Section** - You can [add a reading progress bar to a section](https://nexterwp.com/docs/add-a-progress-bar-to-a-section-in-wordpress/). - **Percentage** - You can easily [show a percentage in the reading progress bar](https://nexterwp.com/docs/show-percentage-in-reading-progress-bar-in-wordpress/). - **Pin Points** - You can [add steps in the reading progress bar](https://nexterwp.com/docs/add-steps-in-a-wordpress-reading-progress-bar/). ## How to Use the Progress Tracker Block? Add the Progress Tracker block from Nexter Blocks to the page. ### Style From the **Type** section, you can select the reading progress bar type. Here you’ll find three options -  - **Horizontal** - To add a horizontal reading progress bar. - **Vertical** - To [add a vertical reading progress bar](https://nexterwp.com/docs/add-a-vertical-reading-progress-bar-in-wordpress/). - **Circular** - To [add a circular reading progress bar](https://nexterwp.com/docs/add-a-circular-reading-progress-bar-in-wordpress/). ![](https://nexterwp.com/wp-content/uploads/2024/12/progress-tracker-layout.png) Select the option as per your requirements, you’ll find different options for each type. Let’s select Horizontal here. From the **Position** section, you can place the progress bar at the top or bottom of the page.  Then, from the **Direction** section, you can set the progress bar direction to left to right or right to left. In the **Apply to** section, you can select where to apply the progress bar, you’ll find two options -  - **Entire Page** - To add a reading progress bar to the entire page. - **Selector** - To add a reading progress bar to a section. Let’s select the Entire Page here. By enabling the **Percentage** toggle, you can [show a percentage in the reading progress bar](https://nexterwp.com/docs/show-percentage-in-reading-progress-bar-in-wordpress/). ### Extra Options From the **Pin Point** toggle, you can [add steps to the reading progress bar](https://nexterwp.com/docs/add-steps-in-a-wordpress-reading-progress-bar/). ![](https://nexterwp.com/wp-content/uploads/2024/12/progress-tracker-extra-option.png) ![](https://nexterwp.com/wp-content/uploads/2024/12/progress-tracker-horizontal-demo.gif) ## How to Style the Progress Tracker Block? You’ll find all the styling options under the Style tab to style the Progress Tracker block. **Progress Bar **- From here, you can style the reading progress bar. You’ll find different options for each type of progress bar. ![](https://nexterwp.com/wp-content/uploads/2024/12/progress-tracker-style.png) **Percentage** - You’ll see this option only when the Percentage toggle is enabled from the Layout tab. From here, you can manage the percentage typography and text color. **Pin Point** - You’ll see this option only when the Pin Point toggle is enabled from the Layout tab. From here you can style the pin point. **Extra Option **- You’ll see this option for the horizontal and vertical progress bar types only. From here, you can add an offset value to the progress bar based on the progress bar type and position. Advanced options remain common for all our blocks, you can explore all it options from here. [View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/#Plus-Extras-Pro) ## Frequently Asked Questions **Q: What should I do if the Progress Tracker block isn't showing up?** A: If the Progress Tracker block isn't appearing, first ensure that the Nexter Blocks plugin is installed and activated. Then, navigate to Nexter u2192 Blocks, search for the Progress Tracker, and make sure the toggle is turned on. This step is crucial as the block won't function without being activated. **Q: What are the different types of reading progress bars I can use?** A: Nexter Blocks offers three types of reading progress bars: horizontal, vertical, and circular. Each type can be styled differently, allowing you to choose the one that best fits your website's design and user experience needs. This flexibility is key to maintaining a cohesive look across your site. **Q: How can I show a percentage in the reading progress bar?** A: To display a percentage in the reading progress bar, enable the Percentage toggle in the Layout tab of the Progress Tracker block settings. This feature provides users with a clear indication of how much content they have consumed, which can enhance engagement and retention. **Q: What styling options are available for the Progress Tracker block?** A: The Progress Tracker block offers various styling options under the Style tab. You can customize the appearance of the progress bar, including typography and color for the percentage display, and adjust the pin points if the Pin Point toggle is enabled. This allows for a tailored look that matches your site's branding. **Q: Does adding a reading progress bar affect page load speed?** A: Adding a reading progress bar using Nexter Blocks is designed to have minimal impact on page load speed. The blocks use pure Vanilla JS and load only 1 CSS and 1 JS file per page, ensuring that performance remains optimal while enhancing user experience with the progress indicator.