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

Esta dica tem como o objetivo o desenvolvimento de um exemplo de barra de progresso, criativa e divertida, utilizando CSS3 com HTML5.

Vamos direto a um exemplo prático sobre uma barra de progresso utilizando CSS3 com 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 */
      }
}

 

LEIA TAMBÉM:  Evento gratuito de tecnologia: inscreva-se na 3ª edição do Dev Summit

Evento gratuito de tecnologia: inscreva-se na 3ª edição do Dev Summit:

  1. Vem ai a 3ª edição do maior evento hands-on de desenvolvimento de software do Brasil. Vamos apresentar tecnologias, ferramentas e práticas em mais de 20 horas em sessões ao vivo com profissionais de referência em Full Stack, Flutter, Angular, React e muito mais.
  2.  



    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.

    Frontend Do Zero Ao Profissional

    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

    Artigos relacionado a Javascript

    Artigos e dicas sobre Javascript e toda sua familia: Node.js, Angular, Ionic, React e muito mais.

    – GitHub lança repositórios privados gratuitos para até três colaboradores

    – Como fazer testes unitários no Node.js com NodeUnit

    – Epoc.js: Projeto open source em JavaScript para Sensores de Controle Cerebral

    – Migre para o Ionic Framework 4 mais fácil usando o TSLint Fixers

    – Apollo lança a Plataforma GraphQL e extensão para VS Code

    – As novidades do Angular 7

    – Tecnologias que andam bombando no GitHub ultimamente

    – Node.JS: Envie o gemidão do Whastzap para seus amigos via chamada telefônica

    – Southbank Software apresenta dbKoda: uma ferramenta de desenvolvimento Open Source para MongoDB

    – Começando com React Native

    – React Native Do Zero Ao Profissional, Curso Sobre Criação De Apps React Native Para Android e IOS

    – React: Tutoriais Fantásticos e Onde Habitam

    – React – O que é Shadow DOM

    – O que são middlewares em NodeJS?

    – Conhecendo os super poderes dos comandos Git e GitHub

    Web

    Artigos e dicas sobre desenvolvimento web que você vai gostar:

    – 6 TENDÊNCIAS DE UX DESIGN PARA OS PRÓXIMOS ANOS

    – UX – User Experience ou Experiência do Usuário – Princípios

    – Usabilidade: Tela com muitas informações ou distribuídas em várias telas?

    – Entenda as diferenças entre Wireframe, Protótipo e Mockup?

    Estatísticas de SEO, novas regras do Google para 2019 e Automação de Marketing Digital

    – Bootstrap – O que são grids CSS

    – Quando usar ANSI e quando usar UTF-8

    – W3C anuncia o DRM como uma recomendação

    – Crie um loading animado divertido usando CSS3

    – Como descobrir se uma cor hexadecimal é escura ou clara

    – Como usar tags semânticas

    – O que é o GZIP e como melhora a velocidade de um site

    – Como adicionar notificações (Push notification) em seu site

     

    VOCÊ ESTÁ NAS SEÇÕES:  Web » HTML5 e CSS3

    votes
    Article Rating

    E-Zine Ramos da Informática

    * indicates required

    View previous campaigns.