Reading Meter Progress bar

[DownPW]

Hello @phenomlab

How do you do this reading-meter-progress bar ?

Thanks

[phenomlab]

@downpw Add this to your custom JS

$(window).on('action:ajaxify.end', function (data) {
    // Main progressbar function
    window.onscroll = function () { myFunction() };
    function myFunction() {
        var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
        var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        var scrolled = (winScroll / height) * 100;
        document.getElementById("myBar").style.width = scrolled + "%";
    }
});

Add this into Custom Header

<div class="reading-meter">
  <div class="reading-meter-progress">
    <div class="reading-meter-progress-bar" id="myBar"></div>
  </div> 
</div>

Sample CSS

.reading-meter {
  position: fixed;
  top: 0px !important;
  z-index: 1111;
  width: 100%;
  background-color: #000000;
}
 
.reading-meter-progress {
width: 100%;
height: 3px;  z-index: 1111;
background: #ffffff;
}
 
.reading-meter-progress-bar {
height: 3px;
background-color:#dddddd;
width: 0%;
}

[DownPW]

@phenomlab said in Reading Meter Progress bar:

Add this into Custom Header
<div class=“reading-meter”>
<div class=“reading-meter-progress”>
<div class=“reading-meter-progress-bar” id=“myBar”></div>
</div>

Sample CSS
.reading-meter {
position: fixed;
top: 0px !important;
z-index: 1111;
width: 100%;
background-color: #000000;
}

.reading-meter-progress {
width: 100%;
height: 3px; z-index: 1111;
background: #ffffff;
}

.reading-meter-progress-bar {
height: 3px;
background-color:#dddddd;
width: 0%;
}

.reading-meter {
visibility: hidden;
}

.reading-meter.show {
visibility: visible;
}

I allow myself a correction:

Add this into Custom Header

<div class="reading-meter">
  <div class="reading-meter-progress">
    <div class="reading-meter-progress-bar" id="myBar"></div>
  </div> 
</div>

Sample CSS

.reading-meter {
  position: fixed;
  top: 0px !important;
  z-index: 1111;
  width: 100%;
  background-color: #000000;
}
 
.reading-meter-progress {
width: 100%;
height: 3px;  z-index: 1111;
background: #ffffff;
}
 
.reading-meter-progress-bar {
height: 3px;
background-color:#dddddd;
width: 0%;
}

[phenomlab]

@downpw good spot. Thanks. Amended original post

[JAC]

@downpw said in Reading Meter Progress bar:

Hello @phenomlab

How do you do this reading-meter-progress bar ?

Thanks

I do like the look of this

[phenomlab]

@jac thanks !

[DownPW]

@phenomlab

it’s very great for continuous reading without pagination

[phenomlab]

@downpw yes, it should auto update the progress based on the page length.

[JAC]

@phenomlab liking the look of this although unsure if it was in blue if it would clash with the nav bar, although may fit in well on top of the yellow title block.

[phenomlab]

@jac you could use the yellow I suppose ?

[JAC]

@phenomlab very true, I don’t suppose white would really work out so yellow could be used yes .

[JAC]

@jac said in Reading Meter Progress bar:

@phenomlab very true, I don’t suppose white would really work out so yellow could be used yes .

I’m still not at home to do this, I wouldn’t even know the steps to do it I’m afraid .

[phenomlab]

@jac Steps are here

[JAC]

@phenomlab said in Reading Meter Progress bar:

@jac Steps are here

Many thanks will hopefully be able to achieve this once home tomorrow!

[phenomlab]

For anyone else following this thread, please see
https://sudonix.com/topic/467/issues-with-progress-bar-on-v3