Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17511
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Barra de progresso ou carregamento igual do youtube

15-06-2013 19:25

Quem está procurando o novo script que o youtube está usando, que é uma barra de progresso que mostra o tempo de carregamento da página, e desaparece quando a página está carregada, acesse http://www.ynh.io/2013/05/24/rebuild-yo ... s-bar.html#

<script src="jquery.js"></script>   <script>           function show () {  $('#progress').show();   document.body.innerHTML+="<div id=\"progress\"><dt></dt><dd></dd></div>";             var pr=document.querySelector("#progress");        setTimeout(function(){                 pr.style.width="60%";                 },300);               setTimeout(function(){                   pr.style.width="101%";                 },800);                 setTimeout(function(){         pr.parentNode.removeChild(pr);                 },1600);             return false;           }   </script>


<style> #progress { display:none;         position: fixed;         z-index: 2147483647;         top: 0;         left: -6px;         width: 1%;         height: 2px;         background: #0088CC;         -moz-border-radius: 1px;         -webkit-border-radius: 1px;         border-radius: 1px;         -moz-transition: width 500ms ease-out,opacity 400ms linear;         -ms-transition: width 500ms ease-out,opacity 400ms linear;         -o-transition: width 500ms ease-out,opacity 400ms linear;         -webkit-transition: width 500ms ease-out,opacity 400ms linear;         transition: width 500ms ease-out,opacity 400ms linear; }     #progress dd, #progress dt {         position: absolute;         top: 0;         height: 2px;         -moz-box-shadow: #0088CC 1px 0 6px 1px;         -ms-box-shadow: #0088CC 1px 0 6px 1px;         -webkit-box-shadow: #0088CC 1px 0 6px 1px;         box-shadow: #0088CC 1px 0 6px 1px;         -moz-border-radius: 100%;         -webkit-border-radius: 100%;         border-radius: 100%; }   #progress dt {         opacity: .6;         width: 180px;         right: -80px;         clip: rect(-6px,90px,14px,-6px); }   #progress dd {         opacity: .6;         width: 20px;         right: 0;         clip: rect(-6px,22px,14px,10px); } </style>


<a href="javascript://" onclick="show()">link</a>   <div id="progress">         <dt></dt>         <dd></dd> </div>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado