36

Estou desenvolvendo uma página onde tem uma barra de progresso e preciso fazer que ela inicie do 0 e vá ao 100%.

Porém preciso fazer somente com CSS e, além disso, necessito que quando ela chegar ao 100%, inicie novamente do 0.

Apesar de existirem algumas informações sobre essa barra de progresso, eu preciso que ela dure exatamente 6 segundos e quando chegar ao 100%, não volte, pule para o 0%.

Alguém já precisou fazer algo semelhante?

1

3 Respostas 3

48
+50

Seria isso, jovem?

.progress{
    height: 15px;
    background-color: #777;
    position: relative;
}

.progress .progress-bar{
   position: absolute;
   height: 100%;
   background-color: #add555;
   animation: progress-animation 6s infinite;
}


@keyframes progress-animation{
    0% { width: 0%; }
    
    100% { width: 100%}
    
}
<div class="progress">
    <div class="progress-bar"></div>
</div>

Explicação

O @keyframes tem como finalidade especificar uma animação para o elemento. Você pode definir as etapas para cada frame da animação através de um bloco de estilos CSS declarado através de from ou to, ou ainda definir através das porcentagens - como fiz acima, indicando que em 0% (o início) a animação deverá conter o tamanho 0% e com 100% terá 100% de tamanho.

Exemplo:

@keyframes example{
    0% {
        /* frame inicial da animação, poderia ser usado "from" */
    }

   50% {
      /* frame do "meio" da animação */
   }

   100% {
      /* último frame da animação */
   }

}

Exemplo com from:

@keyframes example {
      from {
          /* início da animação */
      }
      to {
         /* final da animação */
      }
}

Para usar uma animação declarada com @keyframes, você deverá usar o atributo animation na definição do seletor desejado, além de poder configurar intervalo da animação ou repetições.

Veja:

 .example {
    /* use a animação "example" no intervalo de 2 segundos infinitamente */
    animation: example 2s infinite;
 }

Nota: A propriedade animation é apenas um atalho para as diversas propriedades que podem ser definidas para configurar uma animação. Elas são:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

Leia mais na MDN

25

Minha ideia segue a mesma da resposta do Wallace, com a alternativa de não precisar criar mais de um elemento html para tratar do visual de progresso "interno", a barrinha que vai aumentando a propriedade width. Aproveitando o próprio <div> e utilizando o pseudo elemento ::after (ou ::before) é possível fazer assim:

@keyframes loading {
  from { width: 0 }
  to { width: 100% }
}

div {
  background: #E7E7E7;
  position: relative;
  height: 8px;
  width: 100%
}

div::after {
  animation: loading 6s infinite ease-in-out;
  background: #897FBA;
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0
}
<div></div>

7
  • Eu fui mais rápido :D Commented 14/12/2017 às 12:36
  • 2
    @WallaceMaxters danadin +1. :D Commented 14/12/2017 às 12:38
  • 2
    @WallaceMaxters foi mais rápido rsrs +1 Commented 14/12/2017 às 12:39
  • 1
    @WPfan troque a animação de infinite para forwards: animation: loading 6s forwards ease-in-out;. Commented 2/02/2021 às 18:40
  • 1
    @RenanGomes muito obrigado
    – WPfan
    Commented 4/02/2021 às 17:27
13

Tem uma forma diferente de fazer usando linear-gradiente, assim não precisa de mais do que uma tag ou de usar pseudo-elemento.

Imagine que vc tem um gradiente linear como background de um container, e que esse gradiente é dividido igualmente com 50% da largura com uma cor e os outros 50% com outra cor.

Agora com o background-size vc coloca esse background com 200% do width do container. Dessa forma cada metade do gradiente agora ocupa 100% da largura do container.

inserir a descrição da imagem aqui

Agora com background-position e o @keyframes fazemos o background andar 100% para um lado, mostrando 100% da outra cor que estava "escondida" fora do container.

A animação

Sobre a propriedade animation ela é composta da seguinte maneira no shorthand:

animation: name duration timing-function delay iteration-count direction fill-mode;

Ou no Longhand (valores initial)

animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

No seu caso vc precisa focar no name (nome da animação declarado no @keyframes), duration (tem que vc quer que dure a animação 6s) e iteration-count (quantas vezes a animação vai se repetir infinite "loop eterno") Nessa documentação da Mozilla vc pode se informar mais: https://developer.mozilla.org/pt-BR/docs/Web/CSS/animation

Depois de definido isso vamos trabalha nos intervalos da animação construídos dentro da at-rule @keyframes. Como eu quer que vc tenha primeiro um intervalo de 1s para ver a barra 100% vazia no início e depois um intervalo de 1s para vc ver a barra 100% completa no final eu vou repetir alguns valores no início e no final do @keyframes Os comentário está no código abaixo:

OBS: como a animação tem 6 segundo vou dividir 100 por 6, assim temos 6 intervalos de 16,66% representando cada segundo de animação. No primeiro segundo e no último segundo a barra fica parada por 1 segundo. Se vc não quiser esse efeito basta colocar dessa forma. Assim a barra completa direto, sem um "delay" no inicio e no final pra vc ver os dois estados completos da barra:

/* estado inicial da barra */
  0% {
    background-position: 99% 0;
  }
/* estado final da barra */
  100% {
      background-position: 0 0;
  }

Para entende melhor como funciona o fracionamento da animação e a criação desse "delay" veja os comentário que deixei no código abaixo:

.barra {
    height: 16px;
    width: 50%;
    border-radius: 8px;
    margin: 10px auto;
 /* gradiente com 2 cores */
    background-image: linear-gradient(to right, #bada55 0, #bada55 50%, gray 50%);
 /* agradiente com 200% da largura do container 101% pra cada cor */
    background-size: 202% 100%;
 /* move o backgrount para mostrar apenas a primeira cor */
    background-position: 99% 0;
 /* animação que move o background para mostrar a segunda cor */
    animation: anima 6s ease-in-out infinite;
 /* coloquei 500ms de delay para vc poder ver a barra 100% "vazia" antes de iniciar a animação */


}
@keyframes anima {
    0% {
      /* movemo o background para mostrar apenas 100% de uma cor */
      background-position: 99% 0;
    }
    /* do 0% do tempo da animação até 16,66% do tempo a barra permance parada */
    16.66% {
        background-position: 99% 0;
    }
    /* esse intervalo representa 4 segundos do tempo da animação até a barra fica 100% cheia */
    83.34% {
        background-position: 0 0;
    }
    /* esse intervalo de 83,34% a 100% representa 1 segundo da animação e a barra fica cheia por 1s antes de reiniciar*/
    100% {
        /* de 75% a 100% eu repito o estado da propriedade para vc ter um tempo de ver a barra 100% completa antes de reiniciar a animação */
        background-position: 0 0;
    }
}
<div class="barra"></div>


Uma imagem para explicar melhor a técnica.

A borda azul é o container, e o fundo se movendo é o background. O background tem 200% a largura do pai, assim cada cor que tem 50% do gradiente na verdade fica com 100% da largura do pai. Depois ajustando o valor horizontal do background-position no @keyframes é possível fazer o barra mexendo, dando a impressão que está completando o container.

inserir a descrição da imagem aqui

Suporte dos browser: De acordo com o site https://caniuse.com/ esse modelo funciona do IE10 para cima, Chrome, Fire Fox, Safari, etc...

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .