Barra de progresso para scroll da página com imagem na ponta (CSS + JS) - Bruno Devx - BR Criativus

post #6113

Barra de progresso para scroll da página com imagem na ponta (CSS + JS)

Publicado em: 12/03/2025 / Atualizado em: 12/03/2025

Categorias: BlogCSSJavaScript (JS)JS

Nessa publicação, eu vou fornecer um trecho de código que você pode utilizar para criar uma barra de progresso quando o usuário estiver descendo a página e com o adicional de poder colocar uma imagem na ponta da barra de progresso que se movimenta. Muito útil caso você queira utilizar uma imagem que simula que esta puxando a barra, mas também é opcional.

<div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
    <img src="SUA_IMAGEM" class="img-progress-bar" id="img-progress-bar" style="left: calc(0% - 20px);">
</div>

<style>
.progress-container {
    width: 100%;
    height: 8px;
    background: #9B44DE;
    position: relative;
}

.progress-bar {
    height: 8px;
    background: linear-gradient(to right, #02AFB3, #02AFB3);
    width: 0%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: width 0.1s linear;
}

.img-progress-bar {
    position: absolute;
    top: -16px;
    left: 0;
    width: 40px;
    height: auto;
    transition: transform 0.1s linear, left 0.1s linear;
    z-index: 9;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    background: rgba(255, 255, 255);
    filter: blur(10px);
    transform: translateX(50%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { 
        opacity: 1;
        transform: translateX(120%); 
    }
    100% { 
        opacity: 0;
        transform: translateX(-400%);
    }
}
</style>

<script>
window.onscroll = function() { progress_bar_fx(); };

function progress_bar_fx() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
    
    var progressBar = document.getElementById("myBar");
    var imgProgressBar = document.getElementById("img-progress-bar");

    progressBar.style.width = scrolled + "%";

    imgProgressBar.style.left = `calc(${scrolled}% - 20px)`;
}
</script>

Publicações recomendadas:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=6113

ID de Referência: 6113

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato