Barra de Progresso – HTML 5
Voltando com a programação normal do blog, temos hoje a barra de progresso. Com uma aparência determinada tanto pelo navegador, quanto pelo Sistema Operacional, este novo elemento HTML demonstra que a conjunção do HTML5 + CSS3 + Javascript vieram deixar a web mais dinâmica e muito mais acessível.
Como um desenvolvedor de aplicações web, barras de progresso é uma grande solução quando você quer mostrar ao usuário que alguma ação está acontecendo, especialmente quando tal ação pode demorar um tempo maior. Um exemplo de tal aplicação e ainda animada é o Gmail que mostra ao usuário quanto tempo vai levar para ele carregar e inicializar
Antigamente para se fazer uma barra de progresso era um processo simples, porém envolvia a utilização de algumas div´s, CSS e um pouco de matemática, de certa forma bem simples. Porém atualmente se pensarmos que para tal circunstância temos apenas que definir o elemento <progress>. Então qual o mais simples?
O HTML
Como acabamos de citar o HTML é bastante simples:
<progress max="100" value="27"> Progresso <strong>:. de 60% feito </ strong> <Progresso />
Detalhando agora…. Primeiro os atributos:
- max = Número inteiro que define o valor máximo que é requerido para a ação ser totalmente realizada.
- value = Número inteiro que determina quanto ta ação já foi realizada.
Em determinadas situações a barra de progresso pode ter um estado de indeterminado desta forma ela assume um comportamento diferente. Para tal situação basta ocultarmos o atributo value, como no exemplo abaixo
<progress max="100"> Progresso <strong>:. de 60% feito </ strong> <Progresso />
Este efeito é usado para mostrar que o estado de progresso é atualmente desconhecida. Lembrando novamente que a parte visual varia de navegador para navegador também. Estou tentando criar o elemento progress aqui dentro do artigo pra mostrar a funcionalidade dele. Porém acho que o wordpress não irá executar o código, desta forma vamos em frente.
O Texto dentro do elemento progress é apenas uma alternativa de renderização para navegadores que não oferecem suporte ao elemento.
Navegadores com suporte
Dentre esses navegadores o Opera não difere a barra de progresso quando seu estado é indeterminado, ficando a barra sem nenhuma animação.
E pra finalizar fica uma dica: Utilize a barra de progresso em parceria com o javascript, desta forma você irá atualizando ao usuário o andamento da execução da tarefa.
Bem espero que eu tenha transmitido a informação de forma fácil a todos, o elemento é muito simples e muito prático. Até logo
Publicado em 13 de junho de 2012, em HTML5 e marcado como barra de progresso, HTML5, Javascript, progress bar, progresso. Adicione o link aos favoritos. 7 Comentários.
Fabio Ortiz 
Como defino o tamanho?
Hiago, Você pode controlar o tamanho utilizando o CSS. Suponhamos que use o exemplo do artigo, vc pode utilizar o código abaixo. Lembrando que é apenas uma base. Aconselho a vc a utilizar sempre o CSS para definir as propriedades de visualização da página/sistema
progress {
width:500px;
}
tem como eu personalizar a cor? eu gostaria de colocar uma cor diferente
Me ajudou bastante
Como que fica o JavaScript ?? E da pra eu Inserir imagem ou editar o visual da barra ou é dependente mesmo de cada navegador ? OBrigado.
Antonio segue um exemplo de JS
function ProgressHandler(e) {var complete = Math.round(e.loaded / e.total * 100);
console.log(complete + "% complete");
}
Quando ao visual, a progressbar segue um modelo padrão em cada navegador, com estilo “próprio” mas é editável via CSS, neste caso vc precisa alterar e ir fazendo testes de visual, para acompanhar a interpretação.
E Como eu Coloco um texto dentro da barra do tipo “10%” ?