Barrinha de loading #1
Oi gente! Vou ensinar a fazer uma barrinha de loading super fofa ela é legal para usar em themes em grade ou como enfeite em themes de reforma. Lembrando que os códigos não são meus, eles foram totalmente adaptados por mim, créditos pelo tutorial.
Demo
Ela é TODA em CSS, você tem que colocar esse código:
@import url("demo.css"); html, body { height: 100%; } body { overflow: hidden; position: relative; } /* DEMO 1 */ .demo-1 body:after { content: ""; z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5)); background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5)); background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5)); background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5)); background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5)); } .demo-1 .bar { font-size: 20px; width: 10em; height: 1em; position: relative; margin: 100px auto; border-radius: .5em; background: rgba(255,255,255,0.6); box-shadow: 0 0 0 .05em rgba(100,100,100,0.075), 0 0 0 .25em rgba(0,0,0,0.1), inset 0 .1em .05em rgba(0,0,0,0.1), 0 .05em rgba(255,255,255,0.7); } .demo-1 .bar:after { content: "Loading"; position: absolute; left: 25%; top: 150%; font-family: 'Milonga', cursive; font-size: 1em; color: #555; text-shadow: 0 .05em rgba(255,255,255,0.7); float:center; margin:auto; } .demo-1 .bar .sphere { border-radius: 50%; width: 1em; height: 100%; background: -webkit-linear-gradient(#eee, #ddd); background: -moz-linear-gradient(#eee, #ddd); background: -ms-linear-gradient(#eee, #ddd); background: -o-linear-gradient(#eee, #ddd); background: linear-gradient(#eee, #ddd); box-shadow: inset 0 .15em .1em rgba(255,255,255,0.3), inset 0 -.1em .15em rgba(0,0,0,0.15), 0 0 .25em rgba(0,0,0,0.3); display: block; -webkit-animation: slide 1.75s ease-in-out infinite alternate; -moz-animation: slide 1.75s ease-in-out infinite alternate; -ms-animation: slide 1.75s ease-in-out infinite alternate; -o-animation: slide 1.75s ease-in-out infinite alternate; animation: slide 1.75s ease-in-out infinite alternate; } @-webkit-keyframes slide { to { margin-left: 90%; } } @-moz-keyframes slide { to { margin-left: 90%; } } @-ms-keyframes slide { to { margin-left: 90%; } } @-o-keyframes slide { to { margin-left: 90%; } } @keyframes slide { to { margin-left: 90%; } }
A class "demo-1" define o básico da barrinha, nao mexa em nada. Ja a class "bar" define as cores, o fundo, entao troque as cores se preferir. Em "demo:bar:after" vc define em content o texto que vai aparecer embaixo da barrinha.
O Html (super simples!):
<div class='demo-1'> <div class="bar"> <i class="sphere"></i> </div></div>
Se você quiser aquela fonte que eu usei na preview, coloque entre <head> e </head>:
<link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css'>
E pronto! A barrinha vai ficar funcionando, direitinho ;)
Se usar/gostar da like.
