Drops CSS3 e HTML5 – Como criar uma Barra de progresso

Drops CSS3 e HTML5 – Como criar uma Barra de progresso

Esta dica tem como objetivo um exemplo de criação de barra de progresso com CSS3 e HTML5:

Em CSS3:

.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%}
    
}

// O HTML
<div class="progress">
    <div class="progress-bar"></div>
</div>

 

@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

Ramos de Souza Janones

Janones, é um empreendedor brasileiro apaixonado por empreendedorismo e tecnologia. Ao longo dos anos trabalhando com o desenvolvimento de softwares desktop desde a linguagem Clipper, passando pelo Delphi e atualmente com Java.

Optou pela formação de Publicidade e Marketing por sua segunda empresa de tecnologia ter participado do "boom" da internet nos anos 90 e na procura de melhorar seus conhecimentos em negócios.

Em razão da principal formação e profundos conhecimentos em programação e banco de dados, é capaz de realizar o desenvolvimento de aplicativos web, desktop e mobile com maior criatividade e inovação que profissionais de desenvolvimento com uma formação única e mais especifica, dedicada somente ao desenvolvimento de softwares.

Com toda sua experiência com empresas de software, sua formação e paixão por negócios escreveu o livro "Marketing para Empresas e Profissionais de Software", publicado pela editora carioca Ciência Moderna em 2012. Além de outros livros sobre programação.

Últimos posts por Ramos de Souza Janones (exibir todos)

Share this post

scroll to top