You are looking for Reading processing bar with Multi color functionality then this post is just for you.
Reading processing bar with Multi color functionality
Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'Customize' button.
Step 4: Now click on Edit HTML
Step 5: Now search the code
]]></b:skin> Paste the following Codes just above to it./* Reading Progress Bar by Tecky AaryaN */ .drK .pRs{border:1px solid var(--darkBs);background:var(--darkBa)}.pRs{border:.1px solid var(--contentL);top:0;left:0;z-index:999;height:6px;display:-webkit-box;display:-ms-flexbox;display:flex;background:#e9ecef}.pBar{top:0;left:0;z-index:2;border-radius:.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content;background:var(--linkC);transition:width .6s ease}.pSt{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:50px 50px}
.pAn{animation:AnPr 2s linear infinite}.pSt1{background-image:linear-gradient(45deg,rgba(204,204,204,.15) 25%,transparent 25%,transparent 50%,rgba(204,204,204,.15) 50%,rgba(204,204,204,.15) 75%,transparent 75%,transparent);background-size:50px 50px}.drK .pBar{background:var(--darkU)}.drK .pSt{background-image:linear-gradient(45deg,rgba(255,0,0,.15) 25%,transparent 25%,transparent 50%,rgba(255,0,0,.15) 50%,rgba(255,0,0,.15) 75%,transparent 75%,transparent);background-size:50px 50px}
Step 6: Now search the code <header class='header' id='header'> or <!--[ Header section ]-->and paste the following Codes just below to it.
<!--[ Progress Bar ]-->
<b:section class='Reading Process bar' id='Reading processing bar by Tecky AaryaN' showaddelement='false'>
<b:widget id='HTML98' locked='true' title='Reading Progress Bar' type='HTML' version='2' visible='true'><b:widget-settings>
<b:widget-setting name='content'> <![CDATA[<!--[ This is Progress Bar that appears at top showing the reading progress of a page ]-->]]></b:widget-setting></b:widget-settings>
<b:includable id='main'>
<!--[ Reading Progress Bar ]-->
<div class='pRs'>
<div class='pBar pSt pAn' id='progBar'/></div>
<script type='deferjs'> /*<![CDATA[*/ 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("progBar").style.width = scrolled + "%";} /*]]>*/</script>
</b:includable></b:widget></b:section>
Step 7: Now Click on Save Button
Conclusion
I hope you have successfully added your Progress Bar. If you are facing any problem in any section or you have any question then ask us in the comment box.
Copyright: