post

Barra Horizontal Indicadora de Rolagem em HTML, CSS e JS

Publicado em: 25/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:


Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News


Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/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


Comentários