How To Add Reading Progress Bar In WordPress Website Without Plugin 2024

Hey guys if you are looking for Reading Progress Bar in wordpress website then you are on right website today we will teach you if how you will put reading progress bar in your wordpress website without plugin

Features of Reading progress bar in WordPress

Reading progress bar is like a line that will appear on top of your wordpress website if any of viewer will scroll your website it will float in top of your website and it will look nice to your website and never effect speed of your website its totally smooth and friendly script

How to install Reading Progress Bar in WordPress

First of all you have to login to your wordpress website then goto plugins if you have already installed elements on your wordpress website then okay otherwise you have to install this plugin in your wordpress website,

After finished installing and activating process goto elements it will appear on top of your wordpress dashboard

Click on Add New Element choose element type to Hook and press Create after that put any name to title something like scroll bar then paste the code

</p><br /><br /><br /><br /><br /><br />
<img src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ data-wp-preserve=”%3Cstyle%3E%0A%23site-navigation%7B%3Cbr%20%2F%3E%0A%20%20margin-top%3A10px!important%3B%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3E.tradebones-reading-meter%20%7B%3Cbr%20%2F%3E%0A%20%20position%3A%20fixed%3B%3Cbr%20%2F%3E%0A%20%20top%3A%200!important%3B%3Cbr%20%2F%3E%0A%20%20z-index%3A%201111%3B%3Cbr%20%2F%3E%0A%20%20width%3A%20100%25%3B%3Cbr%20%2F%3E%0A%20%20background-color%3A%20%23f1f1f1%3B%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3E.tradebones-progress%20%7B%3Cbr%20%2F%3E%0A%20%20width%3A%20100%25%3B%3Cbr%20%2F%3E%0A%20%20height%3A%2010px%3B%20%20z-index%3A%201111%3B%3Cbr%20%2F%3E%0A%20%20background%3A%20%23ccc%3B%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3E.progress-bar%20%7B%3Cbr%20%2F%3E%0A%20%20height%3A%2010px%3B%3Cbr%20%2F%3E%0A%20%20background-color%3Atomato%3B%3Cbr%20%2F%3E%0A%20%20width%3A%200%25%3B%3Cbr%20%2F%3E%0A%7D%3Cbr%20%2F%3E%0A%3C%2Fstyle%3E” data-mce-resize=”false” data-mce-placeholder=”1″ class=”mce-object” width=”20″ height=”20″ alt=”<style>” title=”<style>” /><br /><br /><br /><br /><br /><br />
<div class=”tradebones-reading-meter”><br /><br /><br /><br /><br /><br />
<div class=”tradebones-progress”><br /><br /><br /><br /><br /><br />
<div class=”progress-bar” id=”myBar”></div><br /><br /><br /><br /><br /><br />
</div><br /><br /><br /><br /><br /><br />
</div><br /><br /><br /><br /><br /><br />
<p><img src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ data-wp-preserve=”%3Cscript%3E%20%0Awindow.onscroll%20%3D%20function()%20%7BmyFunction()%7D%3B%0Afunction%20myFunction()%20%7B%0A%20%20var%20winScroll%20%3D%20document.body.scrollTop%20%7C%7C%20document.documentElement.scrollTop%3B%0A%20%20var%20height%20%3D%20document.documentElement.scrollHeight%20-%20document.documentElement.clientHeight%3B%0A%20%20var%20scrolled%20%3D%20(winScroll%20%2F%20height)%20*%20100%3B%0A%20%20document.getElementById(%22myBar%22).style.width%20%3D%20scrolled%20%2B%20%22%25%22%3B%0A%7D%0A%3C%2Fscript%3E” data-mce-resize=”false” data-mce-placeholder=”1″ class=”mce-object” width=”20″ height=”20″ alt=”<script>” title=”<script>” />

After that you have to follow few short tips given below

In Display Rules we suggest you to put in only in your posts because its not looking good in homepage still its depends to you where ever you want it to be shown