Acredito que você já deve ter visto, quando acessamos qualquer página do You Tube, durante o carregamento logo "aparece" uma pequena barra com a cor vermelha no topo da página e quando termina de carregar a mesma desaparece. Então, vamos aprender a utilizar esse mesmo estilo de carregamento no Blogger...
Este estilo é um "progress bar" que é executado durante o carregamento da página, onde o usuário poderá visualizar o progresso de carregamento da página em um determinado tempo, nele, é utilizado uma animação que indicar que o carregamento está acontecendo.
Antes, eu queria agradecer ao Charliton Carvalho do site 2C Multimídia um grande amigo e parceiro do Varias Dicas... que nos sugeriu este excelente artigo para ser compartilhado entre nossos leitores.
Veja uma demonstração na imagem logo abaixo:
Clique na imagem
Como colocar estilo de carregamento de página igual o You Tube
Pra colocar no Blog é extremamente fácil vamos apenas inserir um pequeno código no HTML do Blog.
1º Passo: Acesse o painel de edição do seu Blog, clique na opção Modelo >> depois em Editar HTML.
2º Passo: Agora, clique em qualquer parte do código, em seguida, pressione as teclas de atalho "Ctrl+F" do seu teclado e encontre esta seguinte Tag no código:
</body>
3º Passo: Após encontrar a Tag, logo acima dela acrescente este código:
<!-- carregamento -->
<style>#nprogress{pointer-events:none}#nprogress .bar{background:#FF0000;height:2px;left:0;position:fixed;top:0;width:100%;z-index:100}#nprogress .peg{-ms-transform:rotate(3deg) translate(0px,-4px);-webkit-transform:rotate(3deg) translate(0px,-4px);box-shadow:0 0 10px #29d, 0 0 5px #29d;display:block;height:100%;opacity:1.0;position:absolute;right:0;transform:rotate(3deg) translate(0px,-4px);width:100px}#nprogress .spinner{display:block;position:fixed;right:15px;top:15px;z-index:100}#nprogress .spinner-icon{-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite;border:solid 2px transparent; height:18px;width:18px}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.photo{display:none}</style> <div id='loadMore'/> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> <script src='http://goo.gl/10Okof'/>
<!-- Fim do código de carregamento -->
- Prontinho, agora é só clicar em Visualizar Modelo para verificar se esta tudo certo, depois é só clicar em Salvar Modelo.
Alterando o código
- Se você desejar alterar a cor da Barra, basta substituir a parte que esta destacado em vermelho "#FF0000" por um outro código de cor em HTML. (clique aqui para escolher uma Cor em HTML)
- Para alterar a espessura da barra basta alterar o seguinte valor destacado em Azul "height:2px".
Fonte:http://variasdicasparablogs.blogspot.com.br/2014/02/estilo-de-carregamento-de-pagina-do-you.html
SOCIALIZE IT →