Elementos:
- content_progess = es el área en donde se encuenta el contenido
/*PROGRESS BAR*/
//identificamos si es un post
const element_check_post = document.querySelector('body.hs-blog-post');
//identicamos el contenedor del contenido del post
const content_progess = '.m-blog-wrapper__content';
var element_cn_progress = document.querySelector(content_progess);
//agregamos la barra de progreso
const addProgressBar = () => {
const element = document.createElement('div');
element.id = 'progress-container';
element.innerHTML = '<div id="progress-bar"></div>';
//identificamos el conmtenedor de la cabecera para insertar la barra de progreso
var header_el = document.querySelector('.header-container-wrapper header.m-header');
header_el.appendChild(element);
};
//calcula el porcentage de lectura
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');
};
//si es un post ejecutamos
if (typeof (element_check_post) != 'undefined' && element_check_post != null) {
document.addEventListener('DOMContentLoaded', () => {
//agregamos la barra de progreso
addProgressBar();
//calculamos el progreso por primera vez
readingProgress(element_cn_progress);
//al hacer scroll calculamos el porcentage
window.addEventListener('scroll', () => {
readingProgress(element_cn_progress);
});
});
}
Estilos de la barra de progreso.
#progress-container {
width: 100%;
position: absolute;
bottom: -4px;
left: 0;
}
#progress-bar {
height: 4px;
background: #26d07c;
}