Formação Oracle DBA Completa


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:

@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.

VAI GOSTAR: Guia Jurídico Definitivo para Startups

VEJA TAMBÉM: Sucesso na Carreira com o LinkedIn

RECOMENDAMOS: Curso de Desenvolvimento de Games Completo

LEIA: Como Aprender Java e ir além do mercado de trabalho tradicional


Powered by Rock Convert

Frontend Do Zero Ao Profissional

LEIA TAMBÉM:  Construct 2 - Crie seus próprios games em HTML5 e publique no Facebook

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

Siga os bons!

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.


Frontend Do Zero Ao Profissional