Barra Horizontal Indicadora de Rolagem em HTML, CSS e JS - Bruno Devx - BR Criativus

post #4939

Barra Horizontal Indicadora de Rolagem em HTML, CSS e JS

Publicado em: 25/04/2024 / Atualizado em: 27/04/2024

Categorias: BlogJavaScript (JS)JS

Adicione este código no seu site para criar uma barra de rolagem vertical para indicar a rolagem da página. Alem disso, você pode adicionar uma posição fixa no topo ou no rodapé da tela, para que a barra fique sempre visível para o usuario.

<div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
</div>

<style>
.progress-container {
    width: 100%;
    height: 8px;
    background: #ccc;
}

.progress-bar {
    height: 8px;
    background: linear-gradient(to right, #18cdff, #371CFF);
    width: 0%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.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: 0;
        transform: translateX(-400%); }
    100% { 
        opacity: 1;
        transform: translateX(120%); }
}
</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;
    document.getElementById("myBar").style.width = scrolled + "%";
}
</script>

FONTE: https://www.w3schools.com/howto/howto_js_scroll_indicator.asp

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=4939

ID de Referência: 4939

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