Alguns de nossos parceiros estão com ofertas especiais em cursos de programação e de Inglês. Confira os cursos, seus cupons de desconto e inicie 2020 atualizado.

Crie um loading animado divertido usando CSS3

Crie um loading animado divertido usando CSS3

17 de abril de 2017 1 Por Ramos de Souza Janones
Powered by Rock Convert

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

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;
}

 

LEIA TAMBÉM:  Bootstrap - O que são grids CSS?

 

Leia também:  

 

 

Curso completo de Games, inclusive Realidade Aumentada.Powered by Rock Convert

 

 

 

 

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

 

LEIA TAMBÉM:  Como usar tags semânticas
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.

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




Frontend Do Zero Ao Profissional