Step:1
সর্বপ্রথমে নিচের CSS Code টি Copy করুন । AndThan Edit HTML এ গিয়ে <head> এর উপর নিচের Copy করা CSS Code টি Past করুন ।
<style> #ATprogressbar{ position: fixed; bottom: 63px; right: 16px; width:50px; height: 50px; border-radius: 50%; z-index: 99; display: grid; place-items: center; } #progressValue{ background: #fff; width: 40px; height: 40px; border-radius: 50%;color: #000; display: grid; place-items: center;font-size: 12px; } </style>
Step:2
এরপর নিচের Javascript Code টিকে Copy করুন এবং Edit HTML এ গিয়ে </body>এর উপর নিচের Copy করা JS Code টি Past করুন ।
<script> let ATscrollProgress = () =>{ let scrollProgress = document.getElementById("ATprogressbar"); let progressValue = document.getElementById("progressValue"); let pos = document.documentElement.scrollTop; let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; let scrollvalue = Math.round( pos * 100 / calcHeight); scrollProgress.style.background = ` conic-gradient(#00de00 ${scrollvalue}%, #fce6fa ${scrollvalue}%)`; progressValue.textContent = `${scrollvalue}%`; } window.onscroll= ATscrollProgress; window.onload =ATscrollProgress; </script>
Step:3
সবশেষে নিচের HTML Code টিকে Copy করুন এবং উপরের Javascript Code টি যেখানে Past করলেন ।তার উপর এই HTML Code টি Past করুন ।
<div id ='ATprogressbar' onclick="window.scrollTo(0,0)"> <span id ='progressValue'></span> </div>