jQuery: Barra de carregamento

Blog

- jQuery: Barra de carregamento
- Enviado em 25/11/2010 22:53
- Que tal incluir uma bonita barra de carregamentos em seus sistemas? Quer ver como é simples?
  
  Preparando o CSS
```
div#progress 
{
	position: absolute; 
	display: inline-block; 
	width: 240px; 
	height: 70px; 
	left: 50%; 
	top: 50%; 
	margin: -35px 0 0 -120px; 
	background-color: #ddd; 
	background-image: url(http://img143.imageshack.us/img143/143/layz.png); 
	background-repeat: repeat-x; 
	font-family: Verdana; 
	font-size: 11px;
}
	div#progress p#msg 
	{
		margin: 10px; 
		padding: 0; 
		color: #999; 
		text-shadow: #fff 1px 1px 1px;
	}
	div#progress div#holder 
	{
		position: absolute; 
		display: inline-block; 
		width: 220px; 
		height: 29px; 
		left: 10px; 
		bottom: 10px; 
		background-color: #ccc; 
		background-image: url(http://img208.imageshack.us/img208/9107/aeaee.png); 
		background-repeat: repeat-x;
	}
		div#progress div#holder div#bar 
		{
			width: 35%; 
			height: 29px; 
			overflow: hidden; 
			font-weight: bold; 
			font-size: 12px; 
			background-image: url(http://img713.imageshack.us/img713/2208/generatorphp1.gif); 
			color: #666;
		}
			div#progress div#holder div#bar p#pct 
			{
				margin: 7px; 
				padding: 0; 
				text-align: right;
			}
```
  Preparando o HTML
```
<div id="progress">
    <p id="msg">Carregando...</p>
    <div id="holder">
        <div id="bar">
            <p id="pct">35%</p>
        </div>
    </div>
</div>
```
  e agora, o jQuery...
```
$.preloader = function (value)
{
	if (value)
	{
		if (value <= 100)
		{
			$('div#bar').animate
			({
				width: value + '%'
			}, 100);
			$('p#pct').html(value + '%');
		}
	}
};
```
  Acionando a barra
  
  Basta acionar através da função $.preloader() como o exemplo abaixo:
```
$.preloader(50);
```
  Veja um exemplo funcionando
  
  Abraços ;)
Tweet
- - Washington comentou em 25/11/2010 23:30:
  - Muuuuuito bouuuuua !
- - Felipe comentou em 26/11/2010 07:11:
  - Bom demais cara, eu vou usar concerteza...
- - Julimar comentou em 24/03/2011 22:29:
  - Nao sei como colocar eses codigos para poder funcionar me ajude gostaria muito de por esse exemplo em meu blog Obrigado
- - Antonio José comentou em 04/05/2011 11:20:
  - mais uma vez, parabéns por mais um excelente post!
- - Gláuber comentou em 19/07/2011 00:05:
  - Muito bom mesmo. Mas como faço para animar quando estiver carregando de verdade? Tipo uma página?
- - Luis comentou em 22/07/2011 10:40:
  - Parabéns!! Muito Interessante. Só tenho uma dúvida: Como faço para a barra percorrer automaticamente enquando o conteúdo é carregado? Até mais!!
- - Guilherme Madaleno comentou em 23/07/2011 11:48:
  - Olá Luis! Acho que caso seria necessário bolar um script para fazer "precache" do conteúdo e assim, obtendo os resultados em percentuais, usar este script que fiz para mostrar graficamente. Abraços!
- - Guilherme Madaleno comentou em 23/07/2011 11:50:
  - Olá Gláuber. Acho que minha explicação para o Luis (logo acima) pode ajudá-lo em sua dúvida. Obrigado!
- - Wagner Carvalho comentou em 13/08/2011 10:05:
  - Ola, tenho um script que faz contagem de 0 a .... Ele exibe o valor dentro de um campo text de um form. Gostaria de saber com recuperar o valor desse campo para a função $.preloader() Segue o codigo You are
- - Guilherme Madaleno comentou em 15/08/2011 09:40:
  - Olá Wagner. Te mandei um e-mail com meu contato. Se desejar, pode me passar seu código que lhe oriento por lá. Abraço!
- - Eduardo Barros Villa comentou em 22/10/2011 20:46:
  - Primeiramente parabéns, Não estou conseguindo achar script ou explicação sobre "precache" para poder deixar a barra de carregamento dinâmica, teria como dar uma força... Valew
- - Guilherme comentou em 22/10/2011 23:32:
  - Olá Eduardo. Scripts em jQuery para precache (ou preload) de imagens você encontra aos montes pela net. Contudo, mesclar esta barra de carregamento em um script de sua preferência pode demandar uma experiência maior com programação: http://zatec.us/qE5nR
Envie seu comentário!

Comentário

Nome:

E-mail: (Não será divulgado)

Site ou blog: (Opcional)

Comentário: (Máximo de 255 caracteres)

Enviar

Veja também:

Blog

Preparando o CSS

Preparando o HTML

e agora, o jQuery...

Acionando a barra

Comentário

Veja também: