DEV Community

Ben Halpern for The DEV Team

Posted on

What would your opinion be of a "reading position" indicator on DEV?

We have this open PR and I'd love to hear opinions on the value of a feature like this:

Reading position indicator #1626

Is your feature request related to a problem? This is not a problem but I find nice that you have this bar that tells you the amount of scroll left until the end of the article.

Describe the solution you'd like My solution is to add a progress bar inside the #top-bar in nav and depending in the current position of the scroll it will change the percentage of this progress bar. The idea will be also that the bar color is the same as the user profile color, in my case dark green.

How to see an example? (GIF at the bottom) I created this code snippet that you can add in the Chrome Dev Tools > Sources > Snippets, and execute it with Ctrl+Enter (at least in Linux), be aware that you need to be in a post/article page for this to work.

const addProgressBarCSS = () => {
  let css = document.createElement('style');
  css.type = 'text/css';
  css.innerHTML = `
    progress::-webkit-progress-bar {
      background-color: transparent;

    progress::-webkit-progress-value {
      background-color: #0D4D4B;

    progress::-moz-progress-bar {
      background-color: #0D4D4B;


let topBar = document.querySelector("#top-bar")
let articleElement = document.querySelector("article");

let readingBarElement = document.createElement("progress"); = "reading-bar";
readingBarElement.setAttribute("style", `
    width: 100%;
    position: absolute;
    height: 5px;
    top: 49px;
    bottom: 20px;
    left: 0;
    right: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: transparent;
    color: #0D4D4B;
readingBarElement.setAttribute("value", pageYOffset);
readingBarElement.setAttribute("max", articleElement.getBoundingClientRect().height);


window.addEventListener('scroll', () => {
    let currentScrollPosition = pageYOffset;
    let readingBar = document.querySelector("#reading-bar");
    let article = document.querySelector("article");
    let articlePositions = article.getBoundingClientRect();
    let start = articlePositions.y;
    let end = articlePositions.height;

    if (currentScrollPosition >= end) {
        readingBar.value = end;
    } else if (currentScrollPosition > start) {
        readingBar.value = currentScrollPosition;
    } else {
        readingBar.value = 0;
Enter fullscreen mode Exit fullscreen mode

Screenshot andd GIF explanation Gif link


This is the example:

My only technical concern here would be ensuring it doesn't add jankiness to the scrolling behavior, but otherwise this is more of a UX discussion.

Feel free to weigh in.

Discussion (51)

cjbrooks12 profile image
Casey Brooks

I usually find them unnecessary at best, and distracting at worst. Having the "reading time" listed at the top of the article here is enough to give me a sense of how long the article is. But some people really like having them, so maybe there could be a setting for users to turn it on/off per their personal preferences?

I think the reason I don't care for a generic progress bar is that it doesn't really give me meaningful information about my reading progress. I might be halfway through the text of an article, but how much of the remaining article is code snippets, interactive examples, videos, prose, conclusion, etc? The actual progress of me getting through the article may be massively skewed by things that aren't raw text, and so it tends to feel quite arbitrary, generally-speaking.

A better measure of progress might be to enumerate the Headers in the article content, and highlight progress by which headers I've passed. A good example of this is the right-side menu of the Android docs. Seeing that I've got 2 content sections, an example, and a conclusion left until I finish the article is much more meaningful than some arbitrary measure of text. In addition, it allows me to skip directly to a specific section on the page.

dmfay profile image
Dian Fay

Tables of contents would be good, but depend on authors getting their headings in order.

What about using a round "pie chart" indicator on the left sidebar, under the "bookmark" button? I know I've seen this sort of thing before but can't recall exactly where. I think that'd be less obtrusive than the bar across the top.

terabytetiger profile image
Tyler V. (he/him)

I could see this being implemented with/near the ❤️/🦄/🔖 icons

Thread Thread
areahints profile image

how did you get those icons to show up? I need the sauce

Thread Thread
terabytetiger profile image
Tyler V. (he/him)

On Windows, the emoji keyboard (win + ;)

theryanfurrer profile image
Ryan Furrer

I think this is a great way to do it as well is what I was going to recommend. On longer posts I find myself looking for some sort of indicator of where I am and this would be perfect.

codemouse92 profile image
Jason C. McDonald • Edited on

I actually think it would be a good idea. Everyone is mentioning that they "just use the scrollbar", but there's one major problem with that: Right now, with the comments section, the bottom of the article is only 1/4 of the way down!

There are a lot of times that I want to know roughly where I am in the article. It's a side effect of my ongoing focus issues. When I start feeling burned out, I have to decide if I'm going to keep reading. I can scroll down to see "how much farther", but I risk losing my position, and I may not remember anyway! Times like that, I just stop reading.

Based on all that, I have another hypothesis: would such a feature reduce skimming?

teotcd profile image
JedDevs • Edited on

My personel issue with it is it makes me want to finish quicker when im no where near the end or even close to the end while without it I sucker it up and find it less distracting.

But I can see how people like it, and maybe my reason isn't very common so if it is implemented i'd much prefer it be optional as it ruins my reading experience.

codemouse92 profile image
Jason C. McDonald

"Optional" seems like the best approach to me!

Thread Thread
teotcd profile image
JedDevs • Edited on

After having read a fair amount of the comments I agree. Disabled as default, especially after having read the "busy but unclutured" reply. 👍

moopet profile image
Ben Sinclair

Also some people are stuck using operating systems that hide the scrollbar.

darksmile92 profile image
Robin Kretzschmar

I don't want this feature myself, but after reading some comments here I can see benefits to others.

I'd merge the PR and make it configurable through the user settings.
The default setting should be disabled.

hkly profile image
hkly • Edited on

I think it would be good for general accessibility, especially for the longer articles. It would be useful to have for folks who may need it for various reasons, including folks who have reading disabilities where it would be helpful to know how far they are into the article (the scroll bar only shows how far they are into the page, not the article), while not being intrusive and doesn't take away focus from the content for those who may not need it.

Edit: I'm a little surprised that most people are coming at this solely from a personal perspective vs a developer perspective. From an accessibility standpoint, this feature could be helpful for a lot of people.

brianemilius profile image
Brian Emilius

So much this. I work with people who have dyslexia, and I've taught language professionally. One important experience I made was that people who are in some way "reading-impaired" need(!) an overview. They need to be able to comprehend the scope of the text they're reading, and they cannot do it the way a practiced reader can.

missamarakay profile image
Amara Graham

I usually scroll up and down to see the scrollbar as an indicator, but I only do this in longer tutorials. Usually the reading time calculation at the top is enough for me.

I share your technical concern though, but if it can be added quietly and remain unobtrusive I wouldn't mind its existence.

charlesdlandau profile image
Charles Landau

I don't think this should be turned on by default. Hear me out:

An example of this feature really working is spaCy, in my opinion. spaCy is displacing NLTK to some extent, so compare their website: NLTK

For all the design choices in their website hint at their modernity. It feels like a subtle way of doing the bit from the old spice commercial

That works for spaCy to help convince you: "we are the new hot stuff. We do the sexy. Look how slick our site is. It has all the bells and whistles." needs none of that. When you first come here it feels busy but uncluttered. It has everything you want a modern blog platform to have. It feels like it's for devs.

"Busy but uncluttered" is hard to do. I feel like adding this feature would unnecessarily risk that asset.

Disclaimer: I'm no design expert.

teotcd profile image


johnbwoodruff profile image
John Woodruff

I'm done with it so long as there's a setting to disable it. On a note of personal preference, the indicator as mocked up in the article, I often confuse these with loading bars. So it should be thoughtfully designed so as not to confuse users. With those points in mind I'm all for it if it helps people.

adam_cyclones profile image
Adam Crockett • Edited on

Really distracting and that is part due the horizontal vertical disjointed feeling.

Alternative idea: liquid tags that 'chapterize' a post, an author could decide to tag significant parts of the post to relay progress. Kinda like waypoints, then something in the UI could change. To relay that importantness.

Something like:

{% progres(0) #intro %}
This is a really long article on tabs vs spaces ...

{% progress(45) #chapter 56 %}
... And that is why it's really important. 

{% progress(100) #conclusion %}
... so please use tabs okay.
dansilcox profile image
Dan Silcox

Not necessary IMHO, unless it’s in conjunction with an audio screen reader - this comes in super useful in, for example, my bible app which I use every day - I find it really useful to be able to read along while the audio plays.

xowap profile image
Rémy 🤖

On the technical point of view I don't think it's going to be any issue (there's already something with a fixed position on the page and reading the scroll position is really lightweight).

On the functional side, well... Whatever the fuck I don't care (but I use Linux which still has scrollbars so maybe there's that?)

pixeline profile image
Alexandre Plennevaux • Edited on

for me: not needed. I'd rather look for ways to declutter the interface, than add more onto it.

val_baca profile image
Valentin Baca

I would like this, but as others have mentioned, it's important to separate article content vs page-length (which includes comments).

I often read and other sites while my code builds (obligatory xckd It's helpful to know as I'm reading if it's going to be a 2 min read or a 20 minute read (boom! Add to Reading List!)

As always, keep it configurable. I understand other's concerns of becoming too cluttered.

amorpheuz profile image
Yash Dave

I would like to have it if it was something like a reading position indicator, along with indicating which sub-section you are in (subtitles). Like a bar with combination of how vscode docs do it. Here's a sketch using the utmost of my paint skills.

Custom paint Sketch

Otherwise doesn't seem that useful.

jesperhoy profile image
Jesper Høy

I know that a number of big sites do this now, but I don't think that having an indicator that goes in a different direction that the scrolling (horizontal vs vertical) is all that intuitive.

Is there even consensus as to what this type of indicator means?

For example, anything developed with Quasar Framework will by default show the same thing to indicate the progress of background Ajax request...

Perhaps this is a job better left to the scroll bar?

napoleon039 profile image
Nihar Raote

This feature is available in Pocket. I think it'd be really useful when reading articles.

Although there is a time indicator for how long it would take to read the article, it's not that accurate since everyone's reading speed varies.

I usually read a bit of the article to determine if I'm gonna read it. A reading indicator will let me know if it's short enough to read immediately or a little longer to save for later.

woubuc profile image

I like them, they're helpful for longer articles. But they should be subtle enough so they're not distracting while you're reading.

I have a similar reading progress indicator on my blog which I like a lot, I haven't experienced any problems or downsides with it.

cecilelebleu profile image
Cécile Lebleu

Not necessary, but nice to have. I’d use it, because the scrollbar is affected my the comments. Maybe add a toggle in the users’ settings to turn it on/off

adam_cyclones profile image
Adam Crockett • Edited on

Scrollbars are a luxury we seem to see less and less these days (too costly to produce on mass), I heard Microsoft had to outsource thier scrollbar manufacturing plant 😆.

maxmaxymenko profile image
Max Maxymenko • Edited on

Personally, I like them. I can see how it would benefit when reading articles over the phone (currently have to scroll up-and-down to see where I'm at.) In addition, I would prefer it it to be a user settings, then everyone who does not like it can just turn it off.

teotcd profile image

Personally not a fan as it distracts me and I find it unneccesary.

I find it makes me want to reach the end of the article quicker which is a pain but some people like it...i assume so maybe make it optional?

areahints profile image

On mobile it works well with a scroll-to-top float button. I'm trying to find a site where this was implemented, but I really enjoyed the indicator + top button combination. It was a site to read novellas so it really helped to quickly know how much I'd covered.

Considering the only thing this does is visually alert you to how much of an article you've read. Perhaps it might not be so useful as a lot of posts here are usually short reads. I tend to think I would need it if I was reading a 15k words article. At most an estimate of the reading time is a better visual indicator in my opinion.

Just curious, how does fair for accessibility towards screen readers and other enhancements for people with disabilities?

jackharner profile image
Jack Harner 🚀

I don't think it would be ultra necessary, but if y'all we're going to store the "how far down did you get" stat anyway, that might be an interesting analytical thing. Like YouTube's watch time, some sort of "Average Percent Read" thing.

khrome83 profile image
Zane Milakovic

I think you should do something different than a progress bar.

Minutes to read and a donut chart (like Twitter character limit) as you scroll. It would take up less space, and would convey two things. Additionally you could let users set there words per minute to determine the minutes.

flaviuse profile image
Flavien Rebattet

Yes it can help to differentiate post length and (post + comment) length (scrollbar)

brianemilius profile image
Brian Emilius

This is a great idea for accessibility purposes alone - and that should really tell us what we need to make a decision.

chrisachard profile image
Chris Achard

I just use the browser scrollbar for that; though I guess that can be a bit deceiving if there are a lot of comments/recommended posts at the bottom.

obenaf profile image
Richard Deming II • Edited on

I personally enjoy these indicators, but feel they are only useful for longer articles/docs. Most posts I find on this site are relatively short.

iksaku profile image
Jorge González

I don't thinks is necessary, for me at least.

ogrotten profile image

So long as it looks like the pointer on the Big Wheel of The Price is Right, I'll buy in to anything.

jacobherrington profile image
Jacob Herrington (he/him)

I like them for longform, but seems to be sub 2000 word articles most of the time.

xanderyzwich profile image
Corey McCarty

The scroll bar is a a progress bar for down the page. If you fold the comments away until a button is clicked then they aren't a factor in the scrollbar length.

thayannevls profile image
Thayanne Luiza

Very useful for long articles but I would consider adding in the user settings the option to disable.

bugmagnet profile image
Bruce Axtens

It might help me decide when an article becomes TL;DR. Beyond that I can't see a lot of use for it.

idrisrampurawala profile image
Idris Rampurawala

In my opinion, this would not have any relevance inside the post view while I am ready. But on the list view, this might help me to complete my half read posts if any :)

cmmata profile image
Carles Mata

I normally find it useful in blog posts, because if I have no much time and I see a lot of progressbar remaining, I save it for later.

mxoliver profile image

I agree that it would be great for accessibility, but I think there should be an option to disable it in one's profile because it can also be super distracting

crimsonmed profile image
Médéric Burlet

I think there isn't much need for them usually. And I think there might be features more important that people would be more interested in seeing.