Drops CSS3 e HTML5 – Como criar uma Barra de progresso

Drops CSS3 e HTML5 – Como criar uma Barra de progresso

10 de outubro de 2018 0 Por Ramos de Souza Janones
Powered by Rock Convert

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:

Curso completo de Games, inclusive Realidade Aumentada.Powered by Rock Convert
@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 */
      }
}

 

LEIA TAMBÉM:  Os cursos online de programação e tecnologia mais recomendados para 2019

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

Powered by Rock Convert
Curso de Inglês para Programadores.Powered by Rock Convert

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.