#progress-container { position: fixed; width: 100%; height: 4px; left: 0; top: 0; z-index: 1000; background: transparent; transition: all ease-out 0.2s;}#progress-container.ready { transform: translateY(-3px);}#progress-bar { display: block; width: 0; height: 3px; background: #000;}const addProgressBar = () => { const element = document.createElement('div'); element.id = 'progress-container'; element.innerHTML = '
'; document.body.appendChild(element);};const readingProgress = target => { const winTop = window.pageYOffset || document.documentElement.scrollTop; const targetBottom = target.offsetTop + target.scrollHeight; const windowBottom = winTop + window.outerHeight; const progress = 100 - (((targetBottom - windowBottom + window.outerHeight / 3) / (targetBottom - window.outerHeight + window.outerHeight / 3)) * 100); document.querySelector('#progress-bar').style.width = progress + '%'; (progress > 100) ? document.querySelector('#progress-container').classList.add('ready') : document.querySelector('#progress-container').classList.remove('ready');};document.addEventListener('DOMContentLoaded', () => { const content = document.querySelector('#content'); addProgressBar(); readingProgress(content); window.addEventListener('scroll', () => { readingProgress(content); });});