D4D0M3N

With the help of bangank36 we found the solution which works very well: https://codingartistweb.com/2021/08/page-scroll-percentage-with-javascript/ 1. Step, put this code into code block: <div id="progress"> <span id="progress-value"></span> </div> <style> #progress{ height: 100px; width: 100px; border-radius: 50%; position: fixed; bottom: 25px; right: 25px; box-shadow: 0 0 10px rgba(0,0,0,0.2); display: grid; place-items: center; } #progress-value{ display: block; height: calc(100% - 20px); width: calc(100% - 20px); background-color: #ffffff; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 20px; } </style> 2. Step, put following JS script into footer injection. <script> let scrollPercentage = () => { let scrollProgress = document.getElementById("progress"); let progressValue = document.getElementById("progress-value"); 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(#008fff ${scrollValue}%, #c0c0ff ${scrollValue}%)`; progressValue.textContent = `${scrollValue}%`; } window.onscroll = scrollPercentage; window.onload = scrollPercentage; </script>

Can you help me with this?

Yes, of course. domengabriel.com/testorecode 312 However, I curently don't have this code installed, as I don't know how to set the html and css for it.

Hi, I would like to creat a scrolling percentage indication on my one page website. I found this code, but somehow can't make work: <script> // Replace the this class with the class of the text element where you would like to display the percentage. let scrollText = document.querySelector('.your-class'); // This function is calculating the percentage of the current position. function getScrollPercent() { var h = document.documentElement, b = document.body, st = 'scrollTop', sh = 'scrollHeight'; return (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100; } // This updates the text with the percentage of the function above. window.addEventListener("scroll", () => { let currentScroll = parseInt(getScrollPercent()); scrollText.textContent = currentScroll; }); </script>

You are a life safer. Thank you!

Me also. On any other devices, fonts are not showing properly. www.domengabriel.com 312 @font-face { font-family: 'Moonlite Outline'; src:url(https://static1.squarespace.com/static/618d08c5b46ba22b1b512cb4/t/6311a8040b014444853ef041/1662101508201/Moonlite+Outline.otf); font-family: 'Moonlite Solid'; src:url(https://static1.squarespace.com/static/618d08c5b46ba22b1b512cb4/t/6311a8136a3ef47a46804869/1662101523086/Moonlite+Solid.otf); font-family: 'Roboto Mono'; src:url(https://static1.squarespace.com/static/618d08c5b46ba22b1b512cb4/t/6329d128a34b69526f7c2649/1663684905094/RobotoMono-Regular.ttf); } h1 {-webkit-text-stroke: 1px white;font-family: 'Moonlite Solid',sans-serif !important; line-height: 86% !important; color: rgba(0,0,0,0)!important; transition: color 6s; } h1 em { font-family: 'Moonlite Outline',sans-serif !important; font-style: normal; text-transform: uppercase; text-shadow: 0 0 10px #fff; } h4 em { font-style: normal !important; font-family: 'Moonlite Outline',sans-serif !important; text-transform: uppercase; color: white; } h4 { font-style: normal !important; font-family: 'Moonlite Outline',sans-serif !important; text-transform: uppercase; text-indent: 1%; margin-left: 3px; }

On the previous page of this threat, NickCave did exactly what I am triing to achieve. I see he succed: florianbrooks.squarespace.com so I'm wondering if someone could help me customize a code to get similar result

Thank you, I solved this one. For some reason, for me was the spacing before the (.

Have you ever solved this?