How to add Reading processing bar with Multi color functionality

Reading processing bar 

Let's Do a Demo Here...!

View Demo

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 ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ */ .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 ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ'    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

This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box.

Copyright ©

ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ