--- title: "How to Add a Circular Reading Progress Bar in WordPress?" url: https://nexterwp.com/docs/add-a-circular-reading-progress-bar-in-wordpress/ date: 2024-12-12 modified: 2026-09-16 lang: en author: "Aditya Sharma" description: "A ring in the corner of the screen is a small, familiar shape — and it draws itself as your visitor scrolls. The Circular type is a real SVG ring,..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Circular-Reading-Progress-Bar-in-WordPress_-1024x519.jpg word_count: 410 --- # How to Add a Circular Reading Progress Bar in WordPress? ## Key Takeaways - Progress Tracker block is available in Nexter Blocks free and Nexter Blocks Pro, and it is switched on under Nexter > Blocks in the WordPress dashboard. - Circular type is a real SVG ring that fills clockwise with stroke-dashoffset, and its position is limited to the four corners. - Pin Point does not work on Circular, while Percentage still shows a live number in the middle of the ring. A ring in the corner of the screen is a small, familiar shape — and it draws itself as your visitor scrolls. The Circular type is a real SVG ring, not a rotated bar, sitting in one corner of the screen and filling clockwise. *For every Dynamic Device setting in one place, see the [Progress Tracker block guide](https://nexterwp.com/docs/add-a-reading-progress-bar-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-reading-scroll-progress-bar) ## Before You Start - **Edition:** Free — the Progress Tracker block works in Nexter Blocks (free) and Nexter Blocks Pro.- **Block to enable:** Progress Tracker, switched on under **Nexter > Blocks** in your WordPress dashboard.- **The bar is fixed to the screen, not the page.** It stays in place as you scroll, pinned to the edge you choose — that is what makes it a reading indicator rather than a static graphic. ## Steps - Add the **Progress Tracker** block anywhere on the page. - Choose a **Type**: Horizontal, Vertical or Circular. ![The Type options](https://nexterwp.com/wp-content/uploads/2026/09/pt-circular.webp) - Set **Circle Position** to one of the four corners. > *Measured proportional to scroll: the ring's own stroke offset moved exactly in step with how far down the page the visitor had scrolled.* ## How It Behaves - **It is a genuine SVG ring**, drawn with `stroke-dashoffset` — not a rotated bar or a background trick, so it stays crisp at any size.- **Position only offers the four corners**, unlike Horizontal and Vertical's edge positions.- **Percentage still works**, showing a live number in the middle of the ring.- **Pin Point does not work on Circular** — measured, no markers render, since the corner ring has nowhere linear to place them. See the [Pin Point guide](https://nexterwp.com/docs/add-steps-in-a-wordpress-reading-progress-bar/). ## Limitations - No Pin Point support — measured, the setting has no effect here.- A ring in a corner is easy to overlook on a first visit; consider Percentage text to make it more obviously a progress indicator.- A section-scoped bar still needs a section taller than the screen, the same as every type — see the [section guide](https://nexterwp.com/docs/add-a-progress-bar-to-a-section-in-wordpress/). ## Troubleshooting ### The ring never fills Check the page is actually taller than the screen. If **Apply to** points at a section, confirm that section is taller than the viewport — see the [section guide](https://nexterwp.com/docs/add-a-progress-bar-to-a-section-in-wordpress/). ### I want clickable steps on my circular bar Pin Point does not render on Circular — measured. Use Horizontal or Vertical instead if step markers matter more than the ring shape. ### The ring overlaps other fixed content in that corner Switch **Circle Position** to a different corner, or add spacing under Advanced. ## Related Docs - [Progress Tracker block guide](https://nexterwp.com/docs/add-a-reading-progress-bar-in-wordpress/)- [Vertical progress bar](https://nexterwp.com/docs/add-a-vertical-reading-progress-bar-in-wordpress/)- [Show a percentage](https://nexterwp.com/docs/show-percentage-in-reading-progress-bar-in-wordpress/)- [Track one section](https://nexterwp.com/docs/add-a-progress-bar-to-a-section-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before adding a circular reading progress bar in WordPress?** A: The Progress Tracker block is the starting point, and it works in Nexter Blocks free and Nexter Blocks Pro. It also has to be switched on under Nexter > Blocks in your WordPress dashboard. The circular bar is fixed to the screen, not the page, so it behaves like a reading indicator that stays pinned while the visitor scrolls. That matters because it is meant to track reading progress, not sit as a static design element. **Q: How do I make the progress ring appear in a corner of the screen?** A: The Circular type uses a real SVG ring and only gives you the four corner positions. That is different from Horizontal and Vertical, which use edge positions. The corner choice matters because the ring is fixed to the screen and fills clockwise as scroll progress increases. If you want the indicator to feel like part of the page chrome, a corner placement is the intended layout for this type. **Q: Why is my circular reading progress bar not filling as I scroll?** A: The most common cause is that the page is not taller than the screen, so there is no meaningful scroll distance for the ring to measure. If Apply to points at a section, that section also has to be taller than the viewport. The Circular type tracks scroll proportionally with stroke-dashoffset, so it only moves when there is actual vertical progress to measure. **Q: Can I add clickable step markers to a circular reading progress bar?** A: Pin Point does not render on Circular, so clickable or marked steps are not available on that shape. The reason is simple: the corner ring has nowhere linear to place markers. If step markers matter more than the ring look, Horizontal or Vertical is the better fit. For step-based setups, the [Pin Point guide](https://nexterwp.com/docs/add-steps-in-a-wordpress-reading-progress-bar/) covers that pattern. **Q: What should I use if I want both a percentage and a circular progress ring?** A: Percentage still works on Circular, and it shows a live number in the middle of the ring. That helps because a corner ring can be easy to miss on first glance, especially on busy pages. Nexter Blocks gives you both signals in one tracker: the SVG ring for visual motion and Percentage text for an explicit readout. The [Show a percentage](https://nexterwp.com/docs/show-percentage-in-reading-progress-bar-in-wordpress/) doc matches that setup. **Q: Why does my circular progress bar overlap other fixed content?** A: The fix is usually positional rather than structural. Switch Circle Position to another corner, or add spacing under Advanced if something else already occupies that area of the screen. Since the bar is fixed to the screen instead of flowing with page content, it can collide with sticky headers, chat widgets, or other pinned elements in that same corner.