Crie um loading animado divertido usando CSS3

Crie um loading animado divertido usando CSS3

17 de abril de 2017 0 Por Ramos de Souza Janones

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:  Construct 2 - Crie seus próprios games em HTML5 e publique no Facebook

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.