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>