Barra de Progresso – Elementor

1. Insira o script no final do </body> do seu site

Elementor > Código personalizado > Adicionar novo

				
					<script>
    document.addEventListener('DOMContentLoaded', function() {
        const readingProgress = document.querySelector('#reading-progress-fill');
        const footerHeight = 660;
        
        function updateReadingProgress() {
            const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            const progress = scrollTop / scrollableHeight;
            const isFullyScrolled = scrollTop + window.innerHeight >= document.documentElement.scrollHeight;
            const width = isFullyScrolled ? 100 : progress * 100;
            readingProgress.style.width = width + '%';
        }
    
        window.addEventListener('scroll', updateReadingProgress);
        window.addEventListener('resize', updateReadingProgress);
    });
</script>
2. Estilize a barra de progresso

Adicione o código css no seu Elementor.

Se você já está acostumado com o Elementor, sabe que é possível adicionar css personalizados em todos os Widgets, além das configurações globais do site. Como provavelmente vamos usar essa barra de progresso, eu gosto de inserir nas configurações globais.

				
					#reading-progress {
    position: fixed;
    width: 100%;
    height: 10px;
    z-index: 9999;
    top: 0;
    left: 0;
}

#reading-progress-fill {
    height: 10px;
    width: 0;
    -webkit-transition: width 300ms ease;
    -o-transition: width 300ms ease;
    transition: width 300ms ease;
    background-color: #SUBSTITUA-SUA-COR-AQUI;
}

Dica: Caso queira adicionar uma cor gradiente na barra de progresso, use o background-image ao invés de background-color

				
					#reading-progress-fill {
    height: 10px;
    width: 0;
    -webkit-transition: width 300ms ease;
    -o-transition: width 300ms ease;
    transition: width 300ms ease;
    background-image: linear-gradient(to right, #COR-1, #COR-2, #COR-3, #COR-4);
}
3. Adicione o código HTML

Adicione o código HTML no seu Elementor.

Se você já está acostumado com o Elementor, sabe que é possível adicionar css personalizados em todos os Widgets, além das configurações globais do site. Como provavelmente vamos usar essa barra de progresso, eu gosto de inserir nas configurações globais.

				
					<div id="reading-progress"><div id="reading-progress-fill"></div></div>

Assine nossa newsletter

Cadastre seu e-mail para receber todas as informações. Não se preocupe, não enviamos spam!