Barra de progresso que muda de tamanho e cor com apenas uma variável do CSS \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 50 Min 26 Seg Tempo restante da oferta: 14 50 26 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Barra de progresso que muda de tamanho e cor com apenas uma variável do CSS [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # Barra de progresso que muda de tamanho e cor com apenas uma variável do CSS 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. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 8 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/11/05145511/444.png) 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. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) 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/](https://www.treinaweb.com.br/blog/videos/variaveis-com-css-puro/ "https://www.treinaweb.com.br/blog/videos/variaveis-com-css-puro/") [ ![Prototipação Rápida](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/prototipacao.svg) Curso Prototipação Rápida Conhecer o curso ](https://www.treinaweb.com.br/curso/prototipacao-rapida) ## 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: ```html ``` ```css .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. ```css .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. ```css .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**. ![](https://dkrn4sk0rn31v.cloudfront.net/2018/11/05072157/rgbwheel.png) 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. ```css .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`: ```css .progress-bar::before{ content: ""; width: calc(var(--progress) * 1%); background-color: hsl( calc(var(--progress) * 1.2) , 80%, 50%); transition: all 0.2s ease; } } ``` [ ![Doctrine ORM - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/doctrine.svg) Curso Doctrine ORM - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/doctrine-orm-fundamentos) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/07/capa-heuristicas-nielsen-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 2 anos atrás ## [ Heurísticas de Nielsen: princípios e aplicações ](https://www.treinaweb.com.br/blog/heuristicas-de-nielsen-principios-e-aplicacoes) Confira neste artigo como as heurísticas de Nielsen, um conjunto de 10 princípios de usabilidade, podem melhorar a experiência do usuário e tornar as interfaces digitais mais intuitivas e eficientes. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/14142328/DOM-400x280.png) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html) 7 anos atrás ## [ O que é DOM, Virtual DOM e Shadow DOM? ](https://www.treinaweb.com.br/blog/o-que-e-dom-virtual-dom-e-shadow-dom) Entenda o que realmente é o DOM e sua diferença em relação ao Virtual DOM e Shadow DOM. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/CONFIGURAÇÃO-AMBIENTE-MACOS-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 6 anos atrás ## [ Configurando ambiente de desenvolvimento Django no macOS ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-django-no-macos) Veja neste artigo como configurar seu ambiente de desenvolvimento macOS para desenvolvimento rest com Django. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/configurando-ambiente-de-desenvolvimento-spring-boot-no-macos-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 5 anos atrás ## [ Configurando ambiente de desenvolvimento Spring Boot no MacOS ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-spring-boot-no-macos) Aprenda como instalar e configurar o ambiente de desenvolvimento Spring Boot no MacOS Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/page-builders-para-wordpress-o-que-sao-e-como-podem-nos-ajudar-400x280.png) [ WordPress ](https://www.treinaweb.com.br/blog/categoria/wordpress) 6 anos atrás ## [ Page Builders para WordPress: o que são e como podem nos ajudar? ](https://www.treinaweb.com.br/blog/page-builders-para-wordpress-o-que-sao-e-como-podem-nos-ajudar) Saiba o que são os Page Builders para WordPress e como eles podem te ajudar a criar sites e blogs incríveis! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/11/07161636/introducao-a-aws-400x280.png) [ Amazon ](https://www.treinaweb.com.br/blog/categoria/amazon) 8 anos atrás ## [ Introdução à Amazon Web Services (AWS) ](https://www.treinaweb.com.br/blog/introducao-a-amazon-web-services-aws) A Amazon Web Services (AWS) é uma das principais plataformas de computação em nuvem do mercado. Aprenda os principais conceitos e veja como criar sua conta de teste. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/04/16144257/conheca-o-google-cloud-platform-400x280.png) [ Google Cloud Platform (GCP) ](https://www.treinaweb.com.br/blog/categoria/google-cloud-platform-gcp) 9 anos atrás ## [ Conheça o Google Cloud Platform ](https://www.treinaweb.com.br/blog/conheca-o-google-cloud-platform) O Google Cloud Platform é o serviço de computação em nuvem do Google. Ele possui uma quantidade enorme de serviços para as mais diversas áreas. Veja seus principais conceitos e como testá-lo gratuitamente. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/25180146/FERRAMENTAS-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 8 anos atrás ## [ Ferramentas para trabalhar em equipe remotamente ](https://www.treinaweb.com.br/blog/ferramentas-para-trabalhar-em-equipe-remotamente) Neste artigo veremos como as aplicações podem ajudar na comunicação entre equipes remotas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/HERDANDO-TEMPLATES-JINJA-400x280.png) [ Flask ](https://www.treinaweb.com.br/blog/categoria/flask) 6 anos atrás ## [ Como herdar templates com Jinja2 ](https://www.treinaweb.com.br/blog/como-herdar-templates-com-jinja2) Veja neste artigo como herdar templates utilizando o Jinja2. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/criando-um-bottomnavigationbar-com-flutter-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 6 anos atrás ## [ Criando um BottomNavigationBar com Flutter ](https://www.treinaweb.com.br/blog/criando-um-bottomnavigationbar-com-flutter) Veja neste artigo como criar um BottomNavigationBar com Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/thymeleaf-reaproveitando-codigo-com-fragments-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Thymeleaf - Herança de Templates ](https://www.treinaweb.com.br/blog/thymeleaf-heranca-de-templates) Neste artigo veremos como implementar a herança de templates com os fragments parametrizados da template engine Thymeleaf. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/CORREIOS-WOO-COMMERCE-400x280.png) [ WordPress ](https://www.treinaweb.com.br/blog/categoria/wordpress) 6 anos atrás ## [ Saiba como configurar os Correios no WooCommerce ](https://www.treinaweb.com.br/blog/saiba-como-configurar-os-correios-no-woocommerce) Saiba como configurar o sistema de entregas utilizando o plugin dos Correios no WooCommerce. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **14h 50min 26s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58