Barra de progresso que muda de tamanho e cor com apenas uma variável do CSS

Olá, Web Developers!

Hoje veremos como aproveitar variáveis do CSS para criar uma barra de progresso bem simples e controlar sua largura e cor usando apenas uma variável.

Se você nunca trabalhou com variáveis do CSS, temos aqui um vídeo onde explico de forma bem simples e rápida como utilizar: https://www.treinaweb.com.br/blog/videos/variaveis-com-css-puro/

Começando com a barra de progresso

Uma barra de progresso pode ser uma simples div. Vamos iniciar nossa div com o seguinte código:

<div class="progress-bar" ></div>
.progress-bar{
  height: 50px;
  padding: 5px;
  background-color: #ccc;
}

Exibindo o progresso

É muito comum utilizar outra div como progresso, mas também podemos utilizar pseudo-elementos para inserir um conteúdo na div principal. Dessa maneira nosso HTML não precisará ter duas divs para termos nossa barra de progresso, deixando nosso código ainda mais simples.

.progress-bar{
  height: 50px;
  padding: 5px;
  background-color: #ccc;
  /* pseudo-elementos precisam de um
    conteúdo para terem altura.
    Como não teremos conteúdo no nosso
    pseudo-elemento, utilizar
    "display: flex" o força a
    ter a altura do elemento pai.
    */
  display: flex;
}

.progress-bar::before{
  content: "";
  /* Por enquanto colocamos
    uma largura e uma cor
    com valores fixos
    */
  width: 50%;
  background-color: red;
}

Alterando o tamanho do progresso com variáveis

O progresso sempre vai de 0% até 100%. Isso é bem simples: vamos criar uma variável no CSS com o valor inicial de 0 e utilizá-la na largura do nosso pseudo-elemento.

.progress-bar{
  /* vamos declarar nossa
    variável com o nome de
    "progress". Ela terá seu
    valor entre 0 e 100.
    */
  --progress: 50;
  height: 50px;
  padding: 5px;
  background-color: #ccc;
  display: flex;
}

.progress-bar::before{
  content: "";
  /* aqui estamos chamando
    nossa variável. Como a
    largura do pseudo-elemento
    estará entre 0% e 100%, temos
    que converter o valor da nossa
    variável em porcentagem. Para
    isso, basta multiplicar por 1%.
    */
  width: calc(var(--progress) * 1%);
  background-color: red;
}

Agora ao alterarmos nossa variável teremos o tamanho do nosso progresso alterado também.

Como alterar as cores?

Vamos ver como alterar cores baseadas em um valor. É muito comum utilizarmos nomes das cores, o padrão RGB, onde indicamos um valor de 0 a 255 de vermelho (Red), verde (Green) e azul (Blue) ou o Hexadecimal, onde também indicamos a quantidade de vermelho, verde e azul, mas de 00 até FF (255 em hexadecimal).

Porém, outro modo de se declarar cores, que é menos comum de ser ver sendo utilizado na web, é o HSL. Para isso precisamos conhecer o círculo cromático.

O círculo cromático é esse círculo colorido. Lembre-se que o círculo possui 360º. O vermelho está bem em cima, onde consideramos ser o início do círculo. Então podemos indicar cada cor a partir de um ângulo:

  • Vermelho: 0º ou 360º
  • Amarelo: 60º
  • Verde: 120º
  • Ciano: 180º
  • Azul: 240º
  • Magenta: 300º

No HSL nós indicamos as cores a partir de três valores:

  • H(hue – matiz): uma das propriedades que nos permite diferenciar uma cor da outra. Passamos um número entre 0 e 360 de acordo com o círculo cromático acima.
  • S(saturation – saturação): indica se a cor é mais brilhante ou fosca. Passamos um valor entre 0% e 100%.
  • L(light – luz): indica a quantidade de luz na cor. Passamos um valor entre 0% (deixa a cor preta) e 100% (deixa a cor branca).

Então com base nisso podemos deixar o valor de saturação e luz fixos e mudar apenas o valor da matiz.

Como barras de progresso costumam ir do vermelho ao verde, vamos alterar esse valor de 0 até 120.

Alterando a cor com variáveis

Nossa variável de progresso vai de 0 a 100 e temos que fazer nossa cor ir de 0 até 120. Então basta usarmos regra de três para criar nossa fórmula.

Se quando nossa variável chegar a 100 teremos que ter nossa matiz em 120, então quando nossa variável estiver em 50 vamos querer que nossa matiz seja X:

100 = 120
50  = x

Teremos a seguinte fórmula:

x = 120 * 50 / 100

Simplificando, basta multiplicar 1.2 pelo valor da nossa variável. Então vamos usar a função “hsl()” do CSS com saturação e luz com valores fixos e a matiz sendo calculada por essa nossa fórmula.

.progress-bar::before{
  content: "";
  width: calc(var(--progress) * 1%);
  background-color: hsl( calc(var(--progress) * 1.2) , 80%, 50%);
}

Agora ao alterarmos nossa variável CSS o progresso e a cor serão alterados juntos.

Se quiser deixar a barra mais suave, podemos utilizar a propriedade transition:

.progress-bar::before{
  content: "";
  width: calc(var(--progress) * 1%);
  background-color: hsl( calc(var(--progress) * 1.2) , 80%, 50%);
  transition: all 0.2s ease;
}
}


author's picture

Akira Hanashiro

Graduado em Análise e Desenvolvimento de Sistemas e Pós-graduado em Projetos e Desenvolvimento de Aplicações Web. Especializado em Front End e curte desenvolvimento de jogos. Estudante de Machine Learning.