Hi, do you guys have any pointers or suggestions on how to make a progress bar on Casper 3 like that of the previous versions? Thanks!
Hey @vanjungg 
. We’re growing our own tutorials, which include how to add a reading progress bar to your Ghost site. Check it out!
https://ghost.org/tutorials/show-reading-time-progress/
Any questions or problems you have with the tutorial let me know 
6 Likes
Great tutorial. Did you write that one, David?
I, too, have missed the progress bar. It’s been on my to-do list for a while, so you saved me some work!
I have implemented this with my fork of the current Casper theme which I will make available here if anyone is interested.
Keep up the good work on the tutorials!
-TorqueWrench
2 Likes
Thank you! Yes I did, it’s part of my role here at Ghost. And thank you for sharing what you’re doing with Ghost and what you’ve built. Keen to see my tutorial guidance “in action”! 
1 Like
Hii @DavidDarnes this is amazing, going to be the first thing i try out tomorrow’s morning! 
so great that u guys are actually listening to users & making it happen.
1 Like
Hi, can you please help me? I added <progress class="reading-progress-bar"></progress> after L7 in post.hbs
And the Javascript code snippet after L61 in sticky-nav-title.js
https://github.com/TryGhost/Casper/blob/master/assets/js/sticky-nav-title.js#L61
I’m using Casper theme 3.0.5. The bar is not showing however. I appreciate any help!
Hi vanjungg,
Things like this should really be in a div container to which you’ll need to apply CSS stylings. I would instead recommend applying it in the site-header partial (line 5 → line 9 here):
You’ll then need to apply CSS styling so that the progress bar (contained in the bottomHeader div) appears below the Casper’s regular navigation div. This is accomplished by adding relative positioning:
2 Likes
Thank u so much, 
Following your instructions on nightCasper, I was able to get the progress tag in site-header.hbs, the script in post.hbs. The functioning works well.
The only part I’m stuck at is the CSS. The styling is not showing up for some reason. I put it in assets/css/screen.css. To make changes in CSS files appear, do we need to install or do anything to our Ghost directory. Thankful for any suggestions!
That’s great to hear! Thanks for sharing. I’m guessing you need to follow the development guidelines here so the CSS gets compiled correctly? GitHub - Torqu3Wr3nch/nightCasper: An improved, dark theme of Ghost's Casper, targeted toward technical content.
cc @Torqu3Wr3nch
2 Likes
I added the styles between <style> </style> in Ghost’s code injection section (it’s a bit easier to understand & execute for learning beginners like me) thanks ! @Torqu3Wr3nch & @DavidDarnes i’m grateful
(it worked perfectly!)
2 Likes
Glad to hear it. I was planning on formally releasing nightCasper sometime this week or next to the community, so it’s exciting to hear you and @DavidDarnes referencing it.
It sounds like you’re interested in getting started in the development side of things, @vanjungg. If so, I have been chronicling design/development decisions in my devLog, which you may find helpful. There are a few more drafts due in there over the next few weeks. That same blog is running on nightCasper so if you want a sneak preview, you can check it out there.
Let me know if there is anything else I can help with.
-TorqueWrench
2 Likes
Hi, it actually looks stunning to me. Thanks for sharing what you have built. I liked the WireGuard setup post 
I’m on one thanks to an admin’s generosity.
A lot of cool stuff actually! Appreciate it @Torqu3Wr3nch very glad
1 Like
Thank you for the kind words and feedback.
For the sake of completeness, I did a quick write-up explaining why I made the above recommendations/design decisions for nightCasper:
-TorqueWrench
1 Like
Add the element under the site-header element. Add top: 64px; to the existing CSS shown in the tutorial for the progress element so it appears just under the fixed header. You might need to make further adjustments with the CSS 