10.1.13

CSS - Barra de Progresso no Blog

Hello =)

Trouxe um tutorial que muitos não devem conhecer,
ou já viram no tumblr HTMLuv e super legal e dá a dimensão 
de quando o seu novo layout estará pronto, ou qualquer
outra coisa desse tipo.
[Demo
Eu mesma já testei e garanto que vai funcionar!
Se usarem peço que credite o HTMLuv e o Blog.

Adicione um HTML/Javascript e cole o código:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(function() {
$(".meter > span").each(function() {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 1200);
});
});
    </script>

Agora cole isso acima de ]]></b:skin>:

/* --- barra de progresso by luana castro - htmluv e great help --- */
.meter{height: 20px; position: relative; background: #f7f7f7; border-radius: 25px; padding: 10px;}
.meter > span {display: block; height: 100%; border-radius:20px; background-color: #b8accc; box-shadow: inset 0 2px 9px  rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); position: relative; overflow: hidden;}
.meter > span:after, .animate > span > span {content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0;    background-image:-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));background-image:-moz-linear-gradient(-45deg,rgba(255, 255, 255, .2) 25%,transparent 25%transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent); z-index: 1; background-size: 50px 50px;        -webkit-animation: move 2s linear infinite;    -moz-animation: move 2s linear infinite; border-radius:20px; overflow: hidden;}
.animate > span:after {display: none;}
@-webkit-keyframes move {0% {background-position: 0 0;}100% {background-position: 50px 50px;}}
@-moz-keyframes move {0% {background-position: 0 0;}100% {background-position: 50px 50px;}}      
.nostripes > span > span, .nostripes > span:after {-webkit-animation: none;-moz-animation: none;background-image: none;}
Agora adicione outro HTML/Javascript e cole esse código:

<div class="meter animate">
            <span style="width: 50%"><span></span></span>
        </div>re

7 comentários:

  1. nossa que legal , bem simples mais e muito eficaz , porque e muito chato quando as pessoas ficam entrando no blog , quando a genet ainda esta editando ele né , vou usar quando eu for trocar de layout ! Com creditos e claro .
    beijinhos flor

    Liphistik

    http://coisinhasdegarotas99.blogspot.com.br

    ResponderExcluir
    Respostas
    1. E mesmo e muito chato, da próxima vez vou tentar colocar ela no blog
      XOXO ><

      Excluir
  2. Que legal, adorei! haha Já salvei aqui! *-*
    Beijos ~

    Eu-Cotidiano (perfil)

    ResponderExcluir
  3. Adorei seu blog ...super lindo e ja dei uma passeada por aqui tem muitos tutoriais legaiss ... ja ganhou mais uma seguidoraaa... faz uma visitinha pra mim... segue de volta da uma forcinhaa
    bejosss.....

    http://keepcalmandfacavocemesmo.blogspot.com.br/

    ResponderExcluir
  4. Bem legal!!
    seguindo aqui :)


    loucas-por-pink.blogspot.com

    ResponderExcluir

Antes de comentar siga essas regrinhas:
- Aceito segue,segue de volta
- Quando Pedir alguma coisa especifique
- Retribuo todos os comentários
- Pedidos de Afiliação só na Página de Afiliações
- Não use palavras ofensivas
- Não me peça para Divulgar porque não aceito Divulgações