Let’s do you have just made and WordPress website and you want to add a reading meter, or you can say reading progress bar in WordPress post then this video is going to help you a lot because I have shared the way to add a reading progress bar or you can say horizontal progress bar in WordPress page or post so user can estimate the reading time
Contents In The Article
hide
HTML, CSS, and Java Script Code
Simply Copy Paste this code to the element Section according to my youtube video.
<style>
#site-navigation{
margin-top:10px!important;
}
.web-insights-reading-meter {
position: fixed;
top: 0!important;
z-index: 1111;
width: 100%;
background-color: #f1f1f1;
}
.web-insights-progress {
width: 100%;
height: 10px; z-index: 1111;
background: #ccc;
}
.progress-bar {
height: 10px;
background-color:tomato;
width: 0%;
}
</style>
<div class="web-insights-reading-meter">
<div class="web-insights-progress">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<script>
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 + "%";
}
</script>Hope This Article and my video helps you to create or Reading Progress Bar In WordPress Post or Reading Meter.
You Can Watch this video for more clarity.
Let me know if any are facing any issues regarding the same.
Aapne jo #more vala article / video banaya he usme aaj generate press me update aya to vo code vaha se gayab ho gaya iska kuch solution he ya har update me hame khudse he karna padega code???
Same process kro ho jayega
aapne footer me service we offer , quick link , add kiya hai ise add kaise karte hai. please bataye
sir reading bar k liye aapne jitna v code post main diya hai, kya isko use krne se website load time pr koe effect to nhi padega, bcoz isme jss cove v aapne diya.
No issue, This is why I am doing same via just code instead of plugins.
thanku sir, for this reply !
Hey Sir, please make a video on the style of the previous and next buttons that appear at the end of the post below category and above share icons.
Sir nahi ho raha hai
Hello Anand sir, Aapne jo ye process btaya maine implement kiya….but it works only in mobile…desktop me scroll show kr rhe h post pe…pr jb down me scroll krta hun to koi effect nhi kuch nhi pta chalta..kya kru sir iske liye..?
Turn off the fixed menu.
Sir, Ye Scroll Animation/Transition boht smooth hai apki site ki… ye kesy kia? isko koi video bana dein please¬
Sure!
Hi My name is Ravi Gupta thanks for sharing this information I am so happy to watch this video I was searching a lot about this I saw in many websites or it is looking good but I was not able to put in my website because of you I got to know and now I am going to put in my website too
Glad I helped you!