Why show reading progress?
Long pages feel shorter when people can see how far they are. A thin bar at the top answers the question "how much is left?" without taking any space from the content.
News sites, blogs and documentation use it for the same reason. Readers who know the end is near are more likely to finish the article.
The button in the corner
On a phone, getting back to the menu means a lot of swiping. A back-to-top button saves that work. This one stays hidden at the top of the page, so it never covers anything while it is not needed.
The ring around the arrow repeats the progress. It is a small detail, and it makes the button feel like part of the page instead of a sticker on top of it.
One line to install
Add the stylesheet and the script with data-auto. Both parts are created for you. If you want them in a special place, write the two elements yourself and the script will use them.
Measure only the article
A page often has comments, related posts and a big footer below the article. With data-scroll-target the bar measures one element only. It reaches 100% when the article ends, not when the footer ends.
The same option works for the button and for the percentage text.
It stays out of the way
The script listens to scrolling in the gentlest way the browser offers and updates at most once per frame. The bar moves with a transform, which the graphics card handles. Your page stays smooth, also on older phones.
You have reached the end. The bar is full, the ring is closed, and the button will take you back to the top.