Indicator Circular Progres de Scroll

Indicator Circular Progres de Scroll (Blogger Widget)

Creat de: petre-vitan

✨ Previzualizare interactivă:

Live Demo

50%

Mişcă slider-ul pentru test:

📋 Copiază codul de mai jos:

<!-- Widget Indicator Progres Scroll pentru Blogger Realizat de: petre-vitan Urmărește procentajul de citire al paginii cu schimbare dinamică de culori. --> <style> #scroll-progress-wrapper { position: fixed; bottom: 25px; left: 25px; width: 60px; height: 60px; z-index: 9999; display: flex; align-items: center; justify-content: center; background: #100b21; border-radius: 50%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); pointer-events: none; user-select: none; } #scroll-progress-wrapper svg { position: absolute; top: 0; left: 0; transform: rotate(-90deg); width: 100%; height: 100%; } #scroll-progress-wrapper circle { fill: none; stroke-width: 4.5; stroke-linecap: round; } #scroll-progress-wrapper .circle-bg { stroke: rgba(255, 255, 255, 0.08); } #scroll-progress-wrapper .circle-progress { stroke-dasharray: 176; stroke-dashoffset: 176; transition: stroke-dashoffset 0.1s ease, stroke 0.3s ease, filter 0.3s ease; } #scroll-progress-text { font-family: 'Arial', sans-serif; font-size: 13px; font-weight: bold; color: #ffffff; text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); } </style> <div id="scroll-progress-wrapper"> <svg viewBox="0 0 60 60"> <circle class="circle-bg" cx="30" cy="30" r="28"></circle> <circle class="circle-progress" id="progress-bar" cx="30" cy="30" r="28"></circle> </svg> <span id="scroll-progress-text">0%</span> </div> <script type='text/javascript'> //<![CDATA[ (function() { window.addEventListener('DOMContentLoaded', function() { var progressBar = document.getElementById('progress-bar'); var progressText = document.getElementById('scroll-progress-text'); if (!progressBar || !progressText) return; var totalCircumference = 176; function updateScrollProgress() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; if (windowHeight <= 0) { progressBar.style.strokeDashoffset = totalCircumference; progressText.innerHTML = "0%"; return; } var scrollPercent = Math.min(Math.max(Math.round((scrollTop / windowHeight) * 100), 0), 100); var offset = totalCircumference - (scrollPercent / 100) * totalCircumference; if (scrollPercent <= 35) { progressBar.style.stroke = "#2ecc71"; progressBar.style.filter = "drop-shadow(0px 0px 4px rgba(46, 204, 113, 0.6))"; } else if (scrollPercent > 35 && scrollPercent <= 70) { progressBar.style.stroke = "#F7CF05"; progressBar.style.filter = "drop-shadow(0px 0px 4px rgba(247, 207, 5, 0.6))"; } else { progressBar.style.stroke = "#ff0000"; progressBar.style.filter = "drop-shadow(0px 0px 4px rgba(255, 0, 0, 0.6))"; } progressBar.style.strokeDashoffset = offset; progressText.innerHTML = scrollPercent + "%"; } window.addEventListener('scroll', updateScrollProgress); window.addEventListener('resize', updateScrollProgress); updateScrollProgress(); }); })(); //]]> </script>

🛠️ Realizat de: petre-vitan

⚙️ Ghid rapid de instalare pe Blogspot:

Pas	Instrucțiune acțiune
PAS 1	Apasă pe butonul verde "Copiază Cod" de mai sus pentru a salva scriptul.
PAS 2	Intră în panoul administrativ al blogului tău pe platforma Blogger.com.
PAS 3	Din meniul lateral stâng selectează secțiunea dedicată numită Aspect (Layout).
PAS 4	Apasă pe legătura "Adăugați un gadget" (Add a Gadget) în zona unde dorești widgetul.
PAS 5	Din lista pop-up de module, alege opțiunea numită exact HTML/JavaScript.
PAS 6	Nu introduce titlu, mergi la câmpul text mare de conținut și dă **Lipire (Paste)** la cod.
PAS 7	Apasă **Salvați (Save)** pe gadget, apoi fă o **salvare generală** din colțul dreapta-jos.