Чтобы создать такой специфичный элемент управления прокруткой, требуется применение комбинации HTML, CSS и jаvascript. Вот общий подход к решению данной задачи:

Во-первых, нам нужно создать HTML структуру для кнопки прокрутки. Внутри этой кнопки будет два элемента: сама стрелка и индикатор прогресса прокрутки страницы. Давайте назовем их "scroll-btn" и "progress-indicator" соответственно:

  <div id="scroll-btn">
         <svg id="progress-circle" width="50" height="50">
            <circle id="progress-indicator" cx="25" cy="25" r="23" stroke="#fff" stroke-width="2" fill="transparent" />
        </svg>
      </div>

Забыл упомянуть что для прогресса прогрузки нам понадобилось добавить SVG которая и отвечает за индикатор, теперь нужно добавить  CSS оформление:

#scroll-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
}



#progress-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #fff;
    border-radius: 50%;
}
#progress-indicator {
    stroke-dasharray: 144.513; /* 2*Pi*23 (радиус) */
    stroke-dashoffset: 144.513; /* Изначально индикатор пуст, поэтому здесь такое же значение как в stroke-dasharray */
    transition: stroke-dashoffset 0.3s linear; /* Анимация при прокрутке */
}

Ну и конечно же добавим скрипт который будет управлять нашей кнопкой 

let scrollBtn = document.getElementById("scroll-btn");
let progressIndicator = document.getElementById("progress-indicator");

// Добавляем событие прокрутки
window.addEventListener('scroll', function() {
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (window.pageYOffset / height) * 144.513; /* Получить процент прокрутки и умножить его на длину окружности, чтобы получить новое значение для stroke-dashoffset */

  document.getElementById('progress-indicator').style.strokeDashoffset = 144.513 - scrolled;
});

// Добавляем событие клика 
scrollBtn.addEventListener("click", function() {
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    });
});

// Обработчик события прокрутки для показа и скрытия кнопки
window.addEventListener('scroll', function() {
    if (window.scrollY > window.innerHeight / 2) {
        scrollBtn.style.opacity = '1';
    } else {
        scrollBtn.style.opacity = '0.5';
    }
});

Вот такой простенький код у нас вышел, соответственно его нужно менять под ваш стиль, и например изменить стрелку цвет или что то еще в зависимости от вашей необходимости а данную стрелку вы можете увидеть слева страницы.

Если вам была полезна данная статья, то поделитесь данной статьей в социальной сети. А если вам нужна помощь в настройке сайта, нужна верстка или что то еще то жду Вас на kwork .