Are you looking to add a reading progress bar to a section in WordPress? There can be a situation where you may want to add a reading scroll progress bar to a specific section instead of the entire page.
With the Progress Tracker block from the Nexter Blocks, you can easily add a reading progress bar to a specific section in WordPress.
To check the complete feature overview documentation of the Nexter Blocks Progress Tracker block, click here.
Requirement – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.
To do this, add the Progress Tracker block from the Nexter Blocks to the page and follow the steps.
1. First, you have to add a CSS class or ID to the section to which you want to add the reading progress bar.
For instance, we are using the Container block from the Nexter Blocks and added a CSS ID “section-1” in the HTML anchor field under the Advanced tab.
Note: For the progress bar to work, make sure the length of your container is bigger than the browser height.
2. Then select the Progress Tracker block and select the appropriate type.
3. After that, select Selector from the Apply to section.
4. Then in the Class/ID field, add the same CSS ID or class name with # or . (dot) in front. In our case, it will be “#section-1”.
You can make the reading progress bar relative to the selector by enabling the Relative to Selector toggle.
Now you’ll see a reading scroll progress bar showing progress related to that specific section only.
