Community guidelines
Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.
Solved by pamtbaau View solution
Hi there! I am looking for solution of reading progress bar in grav cms. I found only plugin for wordpress article is here
As I understood we are haven't ready plugin on the official site. So is it possible use only html and css for that?
I saw many examples with percentage progress bar etc. But I need at least something similar bar on the top. The rest I can customize through css. Somebody knows how it is will work in Grav CMS?
@alfabuster, There is no prêt-à-porter plugin for this. However, the Typescript for this seems pretty simple. See https://www.cssscript.com/detect-scroll-position-progress/
Thanks for reply. Yes this is similar, I want to use this one https://www.cssscript.com/track-how-far-scrolling/
But how it works in Grav CMS. I connect this script through CDN, but what next. As I understand it should be something like container <div> </div> put in post.html.twig and customize using css.
What to do with the following which is mentioned on the library's website?
Initialize the scrolld library and done.
var scrolld = new Scrolld();You might need to track the scroll position in a specific container. E.g. article.
var scrolld = new Scrolld(document.querySelector('#article'));Get the current scroll position.
scrolld.percent();
I only understand this is javascripts, but where I should to put this code?
It seems the missing piece in your understanding here is how to add external and inline JS (and CSS).
Basically you need to add them into a twig template, probably the base one that includes the other assets.
Have a look at:
{% do assets.AddJs() %} etc outlined in the main section there.Hope that helps.
@alfabuster, Maybe a DIY approach with a step-by-step tutorial might help...
Google is your friend... Search the web using keywords like "js page scroll progress example".
Pick the first response and after reading it, try the following using the default Quark theme:
{% block bottom %}
{{ assets.js('bottom')|raw }}
{% endblock %}
The script checks the scrolled position of an element on the page. This must be an element at the top, right below <body>. In Quark this is element with id "#page-wrapper".
In the copied script, replace
const section = document.querySelector('section');
with
const section = document.querySelector('#page-wrapper');
<div class="progressBar"></div>) right above the script you just inserted.The end result should look like:
{% block bottom %}
{{ assets.js('bottom')|raw }}
<div class="progressBar"></div>
<script>
const progressBar = document.querySelector('.progressBar');
const section = document.querySelector('#page-wrapper');
const scrollProgressBar = () => {
let scrollDistance = -(section.getBoundingClientRect().top);
let progressPercentage =
(scrollDistance /
(section.getBoundingClientRect().height -
document.documentElement.clientHeight)) * 100;
let val = Math.floor(progressPercentage);
progressBar.style.width = val + '%';
if (val < 0) {
progressBar.style.width = '0%';
}
};
window.addEventListener('scroll', scrollProgressBar);
</script>
<style>
.progressBar {
position: fixed;
top: 0;
left: 0;
height: 8px;
background: linear-gradient(to right, #ff5f6d, #ffc371);
width: 0;
z-index: 100;
transition: width 0.2s ease-out;
}
</style>
{% endblock %}
Notes:
#page-wrapper with an id/class/tag of another element.base.html.twig, each and every page will show the progress bar. You might choose to add the code to only certain templates.hughbris, pamtbaau thanks for reply.
With your's short tutorial now it works perfect.
Before create this topic I read 2-3 tutorials, but I can't get success, probably I put code in the wrong place, I use Mediator theme.
Log in to reply.
| Topic | Participants | Replies | Views | Activity |
|---|---|---|---|---|
| 2 | 47 | 1 week ago | ||
| 2 | 56 | 4 weeks ago | ||
| 3 | 1182 | 1 month ago | ||
| 1 | 50 | 1 month ago | ||
| 3 | 74 | 2 months ago |