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

sabatesduran posted on Jan 22, 2019

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;
    }
  `;
  document.querySelector("head").appendChild(css);
}

addProgressBarCSS()

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

let readingBarElement = document.createElement("progress");
readingBarElement.id = "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);

topBar.appendChild(readingBarElement);

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;
    }
});

Screenshot andd GIF explanation Gif link

View on GitHub

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.

Comments

[ogrotten]

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

[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.

[Nihar Raote]

This feature is available in Pocket. I think it'd be really useful when reading dev.to 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.

[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.

[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.

[Areahints]

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 dev.to fair for accessibility towards screen readers and other enhancements for people with disabilities?

[Theo]

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?

[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.

[Oliver]

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

[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 :)