Barrinha de progresso em HTML5 CSS3, vídeo 102

Bem vindo a mais um exercício da Em Busca do Código, e neste exercício nós iremos criar uma barrinha de progresso utilizando HTML e CSS.

Faz um tempo que eu queria inserir uma barrinha dessa no site e, fiz isso a uns dias atrás em nosso curso de Parallax. Por mais que de para inserir detalhes com JavaScript achei legal deixar apenas HTML e CSS.

Assista ao vídeo:

Uma simples barrinha de progresso pode engajar, motivar e até terminar de fidelizar seu usuário como um cliente, sim estamos falando de gamificação, mas sobre este termo, eu paro por aqui.

Para realizar esse exercício eu preciso de um navegador e um editor de código fonte, para isso eu utilizo o Brackets e o Firefox, utilize o de sua preferencial.

Trabalharemos com dois arquivos, o HTML inicialmente tem o padrão inicial HTML, caso precise, aqui vai um.

Código fonte HTML (inicial)

O reset.css eu utilizo o do Eric Meyer caso queira (abre em outra aba):

Resetando a configuração padrão dos navegadores.

O segundo arquivo CSS linkado é o que nós vamos trabalhar. Neste exemplo irei inserir minha barrinha de progresso dentro de uma <section>, que terá como filha uma <div>. A tag section em si, neste caso, não é tão importante, na pratica você irá inserir nossa barrinha de progresso dentro de uma section, ou alguma outra tag.

Repare que eu à inseri uma classe em nossa tag div, então vamos ao arquivo CSS que esta em branco, mas o que é uma barrinha de progresso?

.barrinha {
}

Uma barrinha de progresso tem um tamanho horizontal proporcional a tela do usuário, por isso o width será em porcentagem.

width: 90;

A altura da nossa barrinha de progresso é fixa.

height: 20px;

Um detalhe legal para a nossa barrinha de progresso é retirar as quinas, e para isso utilizamos border-radius.

border-radius: 10px;

Já inserimos uma margem que, muito provavelmente será alterada quando você inserir essa barrinha em algum app ou site.

margin: 5%;

Precisamos de uma borda, e neste exemplo deixo ela o mais simples possível.

border: medium solid black;

E por último o degrade responsável pelo progresso.

background: linear-gradient(to right, #4cf24c 0%, #4cf24c 10%, #bcb9b9 10%);

Nossa barrinha de progresso já está ok, em meu uso pratico no Em Busca do Código eu altero o valor do progresso pelo HTML. Vamos voltar ao arquivo HTML e multiplicar por 4 a barrinha existente, olhe em seu navegador e veja que todas as barrinhas estão iguais, por isso insiro o valor do progresso no HTML.

Faça isso com as outras três barrinhas que você inseriu no HTML, e antes de concluir vamos ao CSS para arrumarmos a cor de fundo.

background-color: #bcb9b9;

Um exercício extra legal seria você alterar o progresso da barrinha de progresso por JavaScript.

Se você acompanha nossos vídeos, você sabe fazer isso, mesmo que precise pesquisar um pouco, você consegue.

Este exercício fica por aqui, espero que tenha gostado, se quiser pode compartilhar esse exercício, e até mais, Fica aqui com duas sugestões de conteúdo que talvez goste.

Código fonte HTML (completo)

<!DOCTYPE html>

<html lang="pt-BR">
    <head>
        <title>Barinha de progresso</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="progresso.css">
    </head>
    <body>
        <h1>Barrinha de progresso</h1>
        <section>
            <div class="barrinha" style="background: linear-gradient(to right, #4cf24c 0%, #4cf24c 25%, #bcb9b9 25%)"></div>
        </section>
        <section>
            <div class="barrinha" style="background: linear-gradient(to right, #4cf24c 0%, #4cf24c 50%, #bcb9b9 50%)"></div>
        </section>
        <section>
            <div class="barrinha" style="background: linear-gradient(to right, #4cf24c 0%, #4cf24c 90%, #bcb9b9 90%)"></div>
        </section>
    </body>
</html>

Código fonte CSS (completo)

.barrinha {
    width: 90%;
    height: 20px;
    border-radius: 10px;
    margin: 5%;
    border: medium solid black;
    background-color: #bcb9b9;
}

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.

Barrinha de progresso em HTML5 CSS3, vídeo 102

Curso aberto de Parallax

Degradê (posição das cores), vídeo 53