Индикатор прокрутки

<!--Индикатор прокрутки (проценты)-->
<!--https://mt-webdesign.ru/indicator-->
<style>
.fix-scroll-element, .scroll-progress {
position: fixed;
z-index: 99;
}
</style>
<script>
$('.scroll-progress .tn-atom').attr('id', 'scrollProgress');
window.addEventListener('scroll', function() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollProgress = Math.round((scrollTop / scrollHeight) * 100);
document.getElementById('scrollProgress').textContent = scrollProgress + '%';
});
</script>

<!--Индикатор прокрутки (Круг)-->
<!--https://mt-webdesign.ru/indicator-->
<!--Настройки индикатора прогресса (круг)-->
<style>
:root {
--ProgressColor: #99C6DA; /*Цвет курсора*/
--ProgressColorBg: #f7f7f745; /*Цвет фона курсора*/
}
@media screen and (max-width: 768px) { /*Отключаем на мобиле*/
.cursor-progress, .cursor-progress-2, .cursor-progress-3 {
display: none;
}
</style>
<div class='progress-circle-wrapper'>
<div class='cursor-progress' id="cursor-progress"></div>
<div class='cursor-progress-2' id="cursor-progress_2"><div class="progress-wrap"><svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102"><path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/></svg></div></div>
<div class='cursor-progress-3' id="cursor-progress_3"></div>
</div>
<style>
.progress-circle-block {
position: fixed;
}
.progress-circle-wrapper {
position: absolute;
left: 0;
width: 100%;
top: 0;
height: 100%;
}
.progress-wrap {
height: 100%;
width: 100%;
cursor: pointer;
display: block;
box-shadow: inset 0 0 0 1.9px var(--ProgressColorBg);
border-radius: 50px;
z-index: 10000;
transition-duration: 300ms;
transition-timing-function: ease-out;
}
.progress-wrap svg path { 
fill: none; 
}
.progress-wrap svg.progress-circle path {
stroke: var(--ProgressColor);
stroke-width: 4;
box-sizing: border-box;
transition-duration: 300ms;
transition-timing-function: ease-out;
}
.cursor-progress,
.cursor-progress-2,
.cursor-progress-3{
position: absolute;
border-radius: 50%; 
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
left: 50%;
top: 50%;
transition-duration: 300ms;
transition-timing-function: ease-out;
}
.cursor{
background-color: #fff;
z-index: 99999;
height: 0;
width: 0;
}
.cursor-progress-2,.cursor-progress-3 {
height: 100%;
width: 100%;
z-index:99998;
}
.cursor-progress-2.hover,
.cursor-progress-3.hover{
-webkit-transform:scale(0.3);
transform:scale(0.3);
border:none;
opacity: 0;
}
.cursor-progress-2.hover .progress-wrap svg.progress-circle path {
opacity: 0;
}
@-webkit-keyframes border-transform{
0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}
@keyframes border-transform{
0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}
</style>
<script>
$('.progress-circle-wrapper').appendTo('.progress-circle-block .tn-atom');
(function($) {
"use strict";
function scrollBanner() {
$(document).on('scroll', function() {
var scrollPos = $(this).scrollTop();
$('.parallax-fade-top').css({
'top': (scrollPos / 2.8) + 'px',
'opacity': 1 - (scrollPos / 600)
});
});
}
scrollBanner();
var progressPath = document.querySelector('.progress-wrap path');
var pathLength = progressPath.getTotalLength();
progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
progressPath.style.strokeDashoffset = pathLength;
progressPath.getBoundingClientRect();
progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';
function updateProgress() {
var scroll = $(window).scrollTop();
var height = $(document).height() - $(window).height();
var progress = pathLength - (scroll * pathLength / height);
progressPath.style.strokeDashoffset = progress;
}
updateProgress();
$(window).scroll(updateProgress);
})(jQuery);
</script>