Autor

Compartilhe e guarde

Enquete

O buscador Bing, da Microsoft, conseguirá alcançar o Google?

Nunca, o Google é insuperável
Pode chegar perto mas não alcança
Depende de mais investimentos da Microsoft
Não sei
Sim, o Bing é promissor

Home Código Fonte JavaScript - DHTML Diversos

Barra de progresso ao carregar uma página

Com este código é possível mostrar uma progress bar durante a carga de uma página.

Esta progress bar não utiliza imagens, sua animação é realizada somente através de JavaScript e independe da linguagem que você usa pois ela roda no lado cliente.

Este código contém 3 arquivos:
- carregador.htm (Exemplo de utilização do carregador)
- carregador.css (Stylesheet com a formatação do carregador)
- carregador.js (Código em JavaScript que torna funcional o carregador)

O funcionamento é bastante simples. Basta inserir o código html (vide arquivo carregador.htm) em seu site, a barra de progresso irá aparecer e na tag BODY no evento onLoad, adicione a chamada da função "__loadEsconde()" que irá esconder a barra de progresso.

<html>
<head>
<title>Progress Bar</title>
<link rel="stylesheet" type="text/css" href="carregador.css">
<script language="JavaScript" src="carregador.js"></script>
</head>
<body onload="__loadEsconde();">
<div id="carregador_pai">
    <div id="carregador">
        <div align="center">Aguarde carregando ...</div>
        <div id="carregador_fundo"><div id="barra_progresso"> </div></div>
    </div>
</div>
</body>
</html>

Arquivo	Tipo	Tamanho	Hits
carregador.htm	Arquivo HTM	418 bytes	7278
carregador.js	Arquivo JS	721 bytes	7306
carregador.css	Arquivo CSS	931 bytes	6681

Este código foi útil para você?

Nota	Comentário
8	denunciar baksantana comentou em 14/4/2010 Funciona, mas... Aparece na Tela Aguarde Carregando..., mas não some do centro da tela, fica lá, o que pode ser? obs.: tenho outros scripts de menu,etc, será q tem alguma incompatilidade?
9	denunciar usertop comentou em 10/1/2010 Legal Fica muito bom
5	denunciar aledestro comentou em 13/12/2008 como faço.... como faço para ele abrir a pagian depois q carrega... aguardo
8	denunciar moa comentou em 14/10/2008 Quase funcionou CORREÇÃO: Cara, eu coloquei seu carregador em um sistema que estou fazendo, ele até aparece toda vez que a pagina é submetida, mas a barra de carregando só aparece no explorer e não medindo o total de carregando
8	denunciar moa comentou em 14/10/2008 Quase funcionou Cara, eu coloquei seu carregador em um sistema que estou fazendo, ele até aparece toda vez que a pagina é submetida, mas não aparece a barra de carregando...
2	denunciar baurusites comentou em 18/11/2007 POBLEMAS NO SISTEMA MEU SITE LOCAL FUNCIONA O CARREGADO MAIS QUALDO EU COLOCO NO MEU SERVIDOR APARECE O ERRO LINHA: 18 CARACTERE:2 ERRO: '_loadTimer' não está definido Código:0 QUE ERRO É ESTE QUEM PODE AJUDAR EU ?
10	denunciar kamikaze comentou em 7/7/2007 Excelente Execelnte..>realmente precisou sim de uma correção...
10	denunciar isaias comentou em 9/5/2007 Concordo, mas... Fiz umas modificações e agora funciona perfeitamente! Estou reenviando o código. Tente localizar como Barra de progresso ao carregar uma página - Corrigido
8	denunciar ricardo comentou em 20/12/2006 nao funciona infelizmente esse codigo nao funcionou.. na verdade funciono mas tem um erro... rs descupa ae..

Regras:
Os comentários seguem as seguintes regras:

Todos os comentários são enviados por membros cadastrados no site.
A pontuação de comentários de conteúdo do próprio membro não serão computados.
Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
Há um limite de 10 comentários por dia para cada membro.
Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

Autenticação:	Apelido: Senha: (ainda não tem cadastro? clique aqui!)

Título:	Máximo de 30 caracteres
Comentário:	Máximo de 255 caracteres
Avaliação: