Ramos da Informática

Crie um loading animado divertido usando CSS3

Aprenda nesta dica a como criar um loading animado e divertido com HTML5 e CSS3. Um exemplo prático e divertido de como criar.

Nesta dica você vai aprender a criar um loading diferente utilizando HTML5 e CSS3 para inovar em seus projetos frontend.

Se você estudou algo de física, conhece seguramente o Newton’s cradle.

HTML:

<div aria-busy="true" aria-label="Loading" role="progressbar" class="container">
<div class="swing">
<div class="swing-l"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="swing-r"></div>

CSS:

body {
  background: #ede9de; 
}
.container {
  left: 50%;
  margin: auto -50px;
  position: absolute;
  top: 50%;
}
.swing div {
  border-radius: 50%;
  float: left;
  height: 1em;
  width: 1em;
}
.swing div:nth-of-type(1) {
  background: -webkit-linear-gradient(left, #385c78 0%, #325774 100%);
  background: linear-gradient(to right, #385c78 0%, #325774 100%);
}
.swing div:nth-of-type(2) {
  background: -webkit-linear-gradient(left, #325774 0%, #47536a 100%);
  background: linear-gradient(to right, #325774 0%, #47536a 100%);
}
.swing div:nth-of-type(3) {
  background: -webkit-linear-gradient(left, #4a5369 0%, #6b4d59 100%);
  background: linear-gradient(to right, #4a5369 0%, #6b4d59 100%);
}
.swing div:nth-of-type(4) {
  background: -webkit-linear-gradient(left, #744c55 0%, #954646 100%);
  background: linear-gradient(to right, #744c55 0%, #954646 100%);
}
.swing div:nth-of-type(5) {
  background: -webkit-linear-gradient(left, #9c4543 0%, #bb4034 100%);
  background: linear-gradient(to right, #9c4543 0%, #bb4034 100%);
}
.swing div:nth-of-type(6) {
  background: -webkit-linear-gradient(left, #c33f31 0%, #d83b27 100%);
  background: linear-gradient(to right, #c33f31 0%, #d83b27 100%);
}
.swing div:nth-of-type(7) {
  background: -webkit-linear-gradient(left, #da3b26 0%, #db412c 100%);
  background: linear-gradient(to right, #da3b26 0%, #db412c 100%);
}
.shadow {
  clear: left;
  padding-top: 1.5em;
}
.shadow div {
  -webkit-filter: blur(1px);
  filter: blur(1px);
  float: left;
  width: 1em;
  height: .25em;
  border-radius: 50%;
  background: #e3dbd2;
}
.shadow .shadow-l {
  background: #d5d8d6;
}
.shadow .shadow-r {
  background: #eed3ca;
}
@-webkit-keyframes ball-l {
  0%, 50% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(50deg) translateX(-2.5em);
    transform: rotate(50deg) translateX(-2.5em);
  }
}
@keyframes ball-l {
  0%, 50% {
    -webkit-transform: rotate(0) translate(0);
    transform: rotate(0) translateX(0);
  }
  100% {
    -webkit-transform: rotate(50deg) translateX(-2.5em);
    transform: rotate(50deg) translateX(-2.5em);
  }
}
@-webkit-keyframes ball-r {
  0% {
    -webkit-transform: rotate(-50deg) translateX(2.5em);
    transform: rotate(-50deg) translateX(2.5em);
  }
  50%,
  100% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
  }
}
@keyframes ball-r {
  0% {
    -webkit-transform: rotate(-50deg) translateX(2.5em);
    transform: rotate(-50deg) translateX(2.5em);
  }
  50%,
  100% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0)
  }
}
@-webkit-keyframes shadow-l-n {
  0%, 50% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: .125;
    -webkit-transform: translateX(-1.57em);
    transform: translateX(-1.75em);
  }
}
@keyframes shadow-l-n {
  0%, 50% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: .125;
    -webkit-transform: translateX(-1.75);
    transform: translateX(-1.75em);
  }
}
@-webkit-keyframes shadow-r-n {
  0% {
    opacity: .125;
    -webkit-transform: translateX(1.75em);
    transform: translateX(1.75em);
  }
  50%,
  100% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes shadow-r-n {
  0% {
    opacity: .125;
    -webkit-transform: translateX(1.75em);
    transform: translateX(1.75em);
  }
  50%,
  100% {
    opacity: .5;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.swing-l {
  -webkit-animation: ball-l .425s ease-in-out infinite alternate;
  animation: ball-l .425s ease-in-out infinite alternate;
}
.swing-r {
  -webkit-animation: ball-r .425s ease-in-out infinite alternate;
  animation: ball-r .425s ease-in-out infinite alternate;
}
.shadow-l {
  -webkit-animation: shadow-l-n .425s ease-in-out infinite alternate;
  animation: shadow-l-n .425s ease-in-out infinite alternate;
}
.shadow-r {
  -webkit-animation: shadow-r-n .425s ease-in-out infinite alternate;
  animation: shadow-r-n .425s ease-in-out infinite alternate;
}

 

 

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.  



     

     

     

     

     

     

    Artigos relacionado a Javascript

    Frontend Do Zero Ao Profissional

    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

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

     

    » Web » HTML5 e CSS3

     

Sair da versão mobile