Hello everyone! I’m modifying the theme of the website of the company I work for and I’m trying to put the progress bar but not getting much success. I’m following this tutorial Show reading time & progress in your Ghost theme and the bar appears but it is not working. can anyone help me?
Hmm. Did you run Gulp after you edited the default.hbs partial? If you look at the code in the browser, do you see the additions to default.hbs and the new javascript that makes the progress bar change, or is an older version showing up?
Are there any errors in the browser console log that might be informative?
things appear not relevant on the console, nothing related to progress. when I updated after putting the script in the default, the bar appears, but it doesn’t work. I also added the style on the post page since I don’t have the side-header anymore. I will show my code:
POST:
{{!< default}}
<progress class="reading-progress" value="0" max="100" aria-label="Reading progress"></progress>
<style>
.reading-progress {
position: fixed;
top: 0;
z-index: 999;
width: 100%;
height: 5px; /* Progress bar height */
background: #c5d2d9; /* Progress bar background color */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Hide default progress bar */
}
.reading-progress::-webkit-progress-bar {
background-color: transparent;
}
.reading-progress::-webkit-progress-value {
background: var(--ghost-accent-color); /* Progress bar color */
}
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>
<style>
.content {
line-height: 2.2rem;
text-align: justify;
color: #8a8a89;
font-family: 'Roboto';
font-weight: normal
}
.content a {
text-decoration: underline;
text-decoration-color: #119ED9;
font-weight: bold;
color: #333B8F;
}
.content figcaption {
font-size: small;
}
h1 {
color: #119ED9;
font-family: 'Titillium Web', sans-serif;
padding-bottom: 1.5rem;
line-height: 3.5rem !important;
}
h2,h3,h4,h5 {
padding-top: 2rem;
color: #119ED9;
font-family: 'Titillium Web', sans-serif;
}
h2 {
font-size: 2.5rem;
line-height: 1.2
}
h5 {
color: #119ED9;
text-align:center
}
ul {
list-style-type: disc;
margin: 0 1.7rem
}
ol {
list-style-type: decimal;
margin: 0 1.7rem
}
ol::marker {
font-size:2rem
}
p, li {
font-size: 19px;
}
</style>
<div>
{{>inside_header}}
{{#post}}
<article class="bg-gray-100">
<header class="post-bg text-center md:pt-12">
<div
class="md:mb-0 md:mx-32 h-2/3 relative">
<img
src="{{feature_image}}" class="absolute w-full h-full z-0 object-cover"/>
<div class="absolute z-20 w-full md:w-2/4 right-0 top-0 ">
{{#if tags}}
<div class="flex flex-row-reverse gap-3">
{{#foreach tags}}
<div class="flex flex-row-reverse">
<a
href={{url}}
class="px-4 py-1 text-white font-bold uppercase text-xs"
style="background-color: #F6A500;
font-family: 'Titillium Web', sans-serif;"
>
{{name}}
</a>
</div>
{{/foreach}}
</div>
{{/if}}
</div>
</div>
</header>
<div class="flex flex-row md:mb-0 md:mx-32 gap-x-12">
<section class="relative">
<div class="content py-4 md:py-10 p-10 md:px-24 shadow-xl bg-white text-lg md:text-2xl leading-loose">
<div
class="post-card-byline-content flex flex-wrap justify-between items-center mb-6 text-sm"
style="color: #8a8a89;"
>
<div class="flex flex-col md:flex-row">
<p class="text-sm">Tempo de leitura: </p>
{{reading_time
minute="1 min"
minutes="% minutos"
}}
</div>
<span class="flex flex-col md:flex-row post-card-byline-date text-sm">
<p class="text-sm">Criado em </p>
<time>{{date published_at format="DD MMMM, YYYY"}}</time>
</span>
<span class="flex flex-col md:flex-row post-card-byline-date text-sm">
<p class="text-sm">Atualizado em </p>
<time class="byline-meta-date" datetime="{{date updated_at format="YYYY-MM-DD"}}">{{date updated_at format="DD MMMM, YYYY"}}</time>
</span>
</div>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="mb-4">
<div class="addthis_inline_share_toolbox_qyry"></div>
</div>
<h1 class="text-3xl md:text-5xl text-left" style="color: #119ED9">
{{title}}
</h1>
{{content}}
<div class="flex flex-row py-5 items-center pt-10">
<ul class="author-list flex flex-wrap list-none mx-0 gap-6">
{{#foreach authors}}
<li class="flex flex-row author-list-item relative gap-x-3">
{{#if profile_image}}
<a
href={{url}}
class="static-avatar block"
style="overflow: hidden"
>
<img
class="author-profile-image rounded-full h-14 w-14 object-cover"
src={{profile_image}}
alt="{{name}}"
/>
</a>
{{/if}}
<div class="flex flex-col justify-center">
<span class="text-sm md:text-md flex items-center" style="color: #9c8b67">
Por {{name}}
</span>
<span class="text-sm md:text-md flex items-center">
{{bio}}
</span>
</div>
</li>
{{/foreach}}
</ul>
</div>
</div>
</section>
{{>recents_side}}
</div>
</div>
<div data-mc-src="e41b9506-dab7-4850-85e3-6f96bd405375#null"></div>
{{> newsletter}}
{{> related}}
</article>
{{/post}}
</div>
DEFAULT:
<style>
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
</style>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{meta_title}}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css">
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
{{ghost_head}}
</head>
<body>
<!--Header -->
{{> main_header}}
<!-- Body -->
{{{body}}}
<script
src="https://cdn2.woxo.tech/a.js#6332f9eb87bbcbaddeabccc1"
async data-usrc>
</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-633216d7d8703b1b"></script> <!-- Footer -->
{{> footer}}
<script src="https://unpkg.com/@tryghost/content-api@1.5.13/umd/content-api.min.js"></script>
<script type="text/javascript" src="{{asset "js/ghost-search.min.js"}}"></script>
{{#is "post"}}
<script>
const progressBar = document.querySelector('.reading-progress');
function updateProgress() {
const totalHeight = document.body.clientHeight;
const windowHeight = document.documentElement.clientHeight;
const position = window.scrollY;
const progress = position / (totalHeight - windowHeight) * 100;
progressBar.setAttribute('value', progress);
requestAnimationFrame(updateProgress);
}
requestAnimationFrame(updateProgress);
</script>
{{/is}}
{{ghost_foot}}
<script type="text/javascript" async src="https://d335luupugsy2.cloudfront.net/js/loader-scripts/58e20a53-2b52-4183-9f9b-ece320f6f7b6-loader.js" ></script>
</body>
</html>
So it’d be useful to know if the progress bar update is firing. Can you add a console.log message temporarily within the body of updateProgress? You should be able to see that message when scrolling. If you aren’t seeing it, that tells you the function isn’t firing. If you are seeing it, then check that perhaps there’s not a conflict between the Tailwind styles and your .reading-progress style?
Is your site online somewhere? Can you share a link if so?
I found this thread after dealing with the same issue. Here’s what happened.
The progress element’s value was set to NaN on page load, and any scroll updated the value to Infinity.
The problem is that totalHeight and windowHeight in the updateProgress() function are the same value. The calculation setting the value of progress ends up dividing by zero.
I confirmed this by printing the values in console.log. These:
const totalHeight = document.body.clientHeight;
const windowHeight = document.documentElement.clientHeight;
are identical values.
My fix was to change totalHeight to
document.documentElement.scrollHeight;
That gets the progress bar working as expected.
1 Like
Thanks for the very helpful post! :)