Reading progress barr in CSS only

[Krzysztof]

This might be a long shot but here it comes.

@Anitac has helped me to solve a long standing problem with the reading time.

Recently I have spotted an extra layer of information for our readers. A progress bar. As usually I have to do things the hard way which means no plugins. I had very bad experience with them and try to avoid them. We also want to have our site to work without scripts.

So I did a bit of digging and found something like this:

Pure CSS Scroll Depth Indicator

The thing is that it would have to be somehow accommodated into my Essence-pro theme.

We sometimes have very long articles, and the minutes calculation at the top is very good, but when there is 30 minutes of reading it might not be enough and a progress bar might be helpful.

Is this even feasible?

Could this be integrated into the normal header or a secondary would have to be created?

It looks easy on that website but when I look at the Essence-pro file it stops looking that easy.

Any hints for a simple solution?

http://infolotnicze.pl

[Krzysztof]

I have found another example.
https://www.silocreativo.com/en/time-progress-bar-css/

I have used the option to add additional css from WordPress theme customization options but it broke everything. Any hints where to smack it to make it work?

[Anita]

@Krzysztof I have *removed* my previous message from here since the answer did not work for your use.

---

Love coffee, chocolate and my Bella!

[andytc]

Hi Anita , I tried your tutorial CSS , it works fine on blog posts , but messes up the blog archive on Essence pro for some reason and it also appears on every page.

[Krzysztof]

I can confirm that. It is shown on home page and in other places. If it could be tweaked to only appear in single posts it would be awesome!

For me it also breaks the author box in a single post view. It is gone and a big blank space is shown.

[Anita]

I fixed my Gist but they have other issues with their code that I am looking into.

---

Love coffee, chocolate and my Bella!

[Krzysztof]

I have removed the extra code from my funcitins.php for testing and it looks like that this extra code doesn't brake the single post look. I still can't see the author box - just a blank space. As i recall I have made no other changes to the Essnce Pro except removing a bit of css to show the search in mobile view.

[andytc]

Anita , the CSS causes the leave a Comment box and author box to be hidden

[Anita]

Appreciate the response. I know about this already. I am working on a resolving this and almost finished. Essence Pro has a lot of things in other files. And they too have things stuffed in there too.

---

Love coffee, chocolate and my Bella!

[Anita]

In answering the initial question here of merely adding it to Essence Pro, it does work, however... a few things. Everything is inside the one element. In order to make all of that work with Author Box, Comments and anything else stuffed in that element, the blog page would need to be deconstructed to separate those things out. The main reason is because the title is overlaid across the hero image so I cannot target just the title. If the title was not on the overlay, this would could be done. I am going to need to leave this now for someone who may be more experienced and who may have the time and willingness to deconstruct this.

---

Love coffee, chocolate and my Bella!

[andytc]

You could do this with a little bit of JS if you're prepared to use a small script- this version will calculate the length of the 'article' and not the whole page , most I've seen calculate the whole body of the page , but that will include comments and other content on the page , which might not be ideal if you've got tons of comments or content after.

We'll control where it's shown with a conditional for single posts -

Add to childtheme functions.php

// Add Scroll Indicator for single posts 

add_action( 'genesis_before_content', 'pl_page_scroll_indicator' );

function pl_page_scroll_indicator () {

	if ( is_single () ) { ?>	

	   <div class="progress-bar"></div>
			
	<script>
    jQuery(document).ready(function($) { 
	
	    $(window).scroll(function() {
		    // calculate the percentage the user has scrolled the article
		    var scrollwin = $(window).scrollTop();
		    var articleheight = $('article').outerHeight(true);
		    var windowWidth = $(window).width();
		    if(scrollwin >= $('article').offset().top){
		        if(scrollwin <= ($('article').offset().top + articleheight)){
		        $('.progress-bar').css('width', ((scrollwin - $('article').offset().top) / articleheight) * 100 + "%"  );
		        }else{
		        $('.progress-bar').css('width',"100%");
		        }
			    }else{
			    $('.progress-bar').css('width',"0px");
		    }
		});
	}); 
	</script>

<?php }

}

Add to custom CSS -

.progress-bar {
  height: 5px;
  background-color: #009ACF;
  width: 0px;
  z-index: 1000;
  position: sticky;
  top: 0px;
  left: 0;
}

that's it , your done. Make coffee , enjoy

[andytc]

TO ADD - You could also add a custom field to that conditional that would give you the option to select which posts to show it on , post by post

[Krzysztof]

I have tested the code, and it works OK, but had to revert the whole website to a js website. Maybe someone else will use it. For us it would be a 180 degree turn so we just settle at not having it. Maybe there will be another way to do it without js in the future. All the best!

[ssamioglu]

Hi Guys,

I am using news pro latest version on akillisebekeler.com. And I have put https://gist.github.com/nutsandbolts/16e74d427490ef6a7911 code into function.php to show the post views. But I could not customize the CSS.

Can you help?

[Author]

Posts