How to add Reading processing bar with Multi color functionality Style 2

Hello! Welcome to Tecky AaryaN. 

You are looking for Reading processing bar with Multi color functionality Style 2 then this post is just for you.

You may want to read this post:

• How to add Reading processing bar with Multi color functionality

Reading processing bar with Multi color functionality Style 2

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 1: Go to Blogger Dashboard.

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>and paste the following Codes just above to it.

<!--[ Progress Bar ]-->
 <b:section class='Reading Process bar' id='Reading Process bar by Tecky AaryaN Style 2' 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: 

Tecky AaryaN

Go to Link

Prev And Next