زر الصعود الى الأعلى مع شريط تحميل

أحد الإضافات الكمالية التي يحسبها كثير من المدونين , كذلك لها فائدة في مواقع كثيرة خصوصاً ذات الصفحات الطويلة , فهي تسهل على من يتصفحها أن يعود للاعلى بسهولة ليكم تصفح الموقع , هذه النسخة خفيفه وبها شريط تحميل يوضح ما تم تحميله من الصفحة


<style>
.ba-scroolb{--scrob-color:#CB0310;position:fixed;bottom:30px;right:30px;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:6;}
.ba-scroolb.visible{opacity:1;}
.scrollb{position:relative;display:flex;justify-content:center;align-items:center;width:auto;height:auto;cursor:pointer;}
.scrollb svg{width:50px;height:50px;display:block;transition:all .4s;}
.scrollb .scroolbround{fill:#fff;stroke:#ccc;stroke-width:2px;}
.scrollb .scrolbprogres{fill:none;stroke:var(--scrob-color);stroke-width:3px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);}
.scrollb i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--scrob-color);font-size:20px;}
.scrollb:hover svg {filter: drop-shadow(0 0 5px #888);}
</style>

<div class="ba-scroolb">
  <div class="scrollb" onclick="scrollToTop()">
    <svg>
      <circle class="scroolbround" cx="25" cy="25" r="20"></circle>
      <circle class="scrolbprogres" cx="25" cy="25" r="20" stroke-dasharray="126" stroke-dashoffset="126"></circle>
    </svg>
    <i class="fa-solid fa-arrow-up"></i>
  </div>
</div>
<script>
const scrollButtonsContainer=document.querySelector(".ba-scroolb");const progressBar=document.querySelector(".scrolbprogres");function scrollToTop(){window.scrollTo({top:0,behavior:"smooth"})}function updateProgressBar(){const scrollTop=document.documentElement.scrollTop;const scrollHeight=document.documentElement.scrollHeight-document.documentElement.clientHeight;const progress=scrollTop/scrollHeight*100;const circumference=2*Math.PI*20;const offset=circumference-progress/100*circumference;progressBar.style.strokeDashoffset=offset}function handleScroll(){if(document.documentElement.scrollTop>200){scrollButtonsContainer.classList.add("visible")}else{scrollButtonsContainer.classList.remove("visible")}updateProgressBar()}window.addEventListener("scroll",handleScroll);handleScroll();window.addEventListener("resize",updateProgressBar);
</script>