Question about the Ghost 'Show reading time & progress' tutorial

Hey! :blush: I’ve recently started using Ghost as my CMS. I have a couple of questions regarding the Ghost ‘[Show Reading time & progress]’ tutorial.

  1. Can I know where to add the HTML in step 2? I’m given to understand that it should be added within the post.hbs file but I’m not sure where.

  2. Can I please know where to add the CSS and Javascript codes in step 3 and 4?It doesn’t specify where to add or which hbs file to use.

I’ve tried various ways and added the Javascript to #ContentFor section etc but it doesn’t give me the desired outcome. I’m hoping to get the reading progress effect such as this page which talks about markdown.

Would appreciate it if you can help me with this. Cheers!

Hi @jia_shing,

  • add the progressbar to the site-header.hbs with a div containter:
<div class="outer site-nav-main">
    <div class="inner">
        {{> "site-nav"}}
    </div>
    {{#is "post"}}
    <div class="progress-bar">
        <progress class="reading-progress-bar"></progress>
    </div>
    {{/is}}
</div>
  • add following css in your screen.css

.progress-bar {
    height: 2px;
    position: relative;
    top: 0px;
    left: -5vw;
}

progress.reading-progress-bar {
    appearance: none;
    position: absolute;
    width: 100vw;
    height: 2px;
}

progress.reading-progress-bar[value]::-webkit-progress-bar {
    background-color: rgba(0, 0, 0, 0.5);
}

progress.reading-progress-bar[value]::-webkit-progress-value {
    background-color: #3eb0ef;
}
  • add js in your post.hbs
{{!-- Reading Time Progress Bar --}}
<script>
    const readingProgress = (contentArea, progressBar) => {
        const content = document.querySelector(contentArea);
        const progress = document.querySelector(progressBar);

        const frameListening = () => {
            const contentBox = content.getBoundingClientRect();
            const midPoint = window.innerHeight / 2;
            const minsRemaining = Math.round(progress.max - progress.value);

            if (contentBox.top > midPoint) {
                progress.value = 0;
            }

            if (contentBox.top < midPoint) { progress.value = progress.max; } if (contentBox.top <= midPoint && contentBox.bottom >=
                midPoint) {
                progress.value =
                    (progress.max * Math.abs(contentBox.top - midPoint)) /
                    contentBox.height;
            }

            window.requestAnimationFrame(frameListening);
        };

        window.requestAnimationFrame(frameListening);
    };

    readingProgress(".post-full-content", ".reading-progress-bar");
</script>

Hey! Thanks to you, I have a progress bar now. However, it is located in the top left corner and not across the page like I intended it to be. Can you please help me with that? Much appreciated! :grin:

It’s alright. I solved it by injecting the code into the post header and adding the <style> tag.

These are the modified code that looks good enough on my desktop and phone as well.

<style>
    .progress-bar {
        height: 5px;
        position: relative;
        top: 0px;
        left: -4.95vw;
    }
	progress.reading-progress-bar {
      appearance: none;
      position: fixed;
      width: 109vw;
      height: 5px;
    }

    progress.reading-progress-bar[value]::-webkit-progress-bar {
      background-color: #fafafa;
    }

    progress.reading-progress-bar[value]::-webkit-progress-value {
      background-color: #3eb0ef;
 </style>