Formação Oracle DBA Completa


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

Nesta dica aprenda como criar um loading animado e divertido com CSS3.

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:  HTML, CSS e Bootstrap - O uso de de "rem", "en" e pixels "px".

 

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

 

 

 

 

 

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

– 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

 

LEIA TAMBÉM:  Novidade no formatador de código Prettier
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