Agregar una barra del progreso con JavaScript en Hubspot

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;
} 
Share on facebook
Share on twitter
Share on linkedin