Guia de início rápido: adicionando controles de progresso (HTML)
[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]
Os controles de progresso fornecem uma forma para você indicar que o seu aplicativo está realizando trabalho, como baixando imagens, carregando arquivos ou processando dados. Aqui estão os diversos estilos de controle de progresso e como adicioná-los a um aplicativo do Tempo de Execução do Windows em JavaScript.
Pré-requisitos
Presumimos que você consiga criar um aplicativo básico do Tempo de Execução do Windows em JavaScript. Para obter ajuda para criar o seu primeiro aplicativo, veja Compilando o seu primeiro aplicativo do Tempo de Execução do Windows em JavaScript. Para obter ajuda para criar os seus primeiros controles e adicionar manipuladores de eventos, veja Guia de início rápido: adicionando controles e manipuladores de eventos.
Estilos de controle de progresso
Há três estilos de controles progress que indicam ao usuário quando a quantidade de trabalho para concluir é conhecida, quando não é e se a tarefa é modal: o estilo de barra de progresso determinado, o estilo de barra de progresso indeterminado e o estilo de anel indeterminado.
| Barra de progresso determinado: Mostra quanto progresso o aplicativo fez. Conforme o trabalho progride, uma cor de preenchimento expande da esquerda para a direita até encher a barra de progresso. | .png "Uma barra de progresso determinado") |
| Barra de progresso indeterminado: Indica que os usuários podem interagir com a interface do usuário enquanto a tarefa continua. Na animação, os pontos aparecem na esquerda e se movem para a direita ao longo de uma trilha até que eles alcançam o fim da trilha e desaparecem. | .png "Uma barra de progresso indeterminado") |
| Anel de Progresso Indeterminado (somente Windows): indica que a atividade do usuário é bloqueada até que o aplicativo complete a tarefa, isso é, a atividade seja modal. Na animação, alguns pontos movem no sentido horário em um círculo. | .png "Um círculo de progresso indeterminado") |
Adicionando uma barra de progresso determinado
Uma barra de progresso determinado mostra quanto progresso o aplicativo fez. Conforme o trabalho progride, a barra enche. Se você puder estimar a quantidade de trabalho restante em termos de tempo, bytes, arquivos ou alguma outra unidade quantificável de medida, use uma barra de progresso determinado. Para saber mais sobre quando usar uma barra de progresso determinado, veja as Diretrizes e lista de verificação de controles de progresso.
A barra de progresso fornece 3 propriedades para definir e determinar o progresso:
| Propriedade | Descrição |
|---|---|
Um número que especifica o valor de término. O valor padrão é 1.0. |
|
Um número que especifica o progresso atual. Se você estiver mostrando o progresso de um download de arquivo, este valor poderia ser o número de bytes baixado (e então você define max para o número total de bytes a baixar). |
|
(Somente leitura). O indicador de progresso atual, que é value dividido pelo max. |
Para criar uma barra de progresso determinado
Para criar uma barra de progresso determinado, você cria um elemento de progresso e define a sua propriedade value. Se você não quiser usar o valor de término 1.0, pode alterá-lo definindo a propriedade max. Este exemplo cria uma barra de progresso determinado e define o seu value como 30 e o seu max como 100. A barra de progresso resultante mostra que o progresso concluiu 30%.
<progress id="determinateProgressBar" value="30" max="100"></progress>
Para atualizar o valor de uma barra de progresso determinado
O exemplo anterior mostrou como especificar o valor de uma barra de progresso na marcação. Em um aplicativo real, você usa JavaScript para atualizar o valor da barra de progresso como resposta para algum indicador de progresso. Por exemplo, se a sua barra de progresso indicar quantos arquivos foram baixados, você atualiza o valor cada vez que outro arquivo é baixado.
Este exemplo atualiza o valor de uma barra de progresso.
var progressBar = document.getElementById("determinateProgressBar");
progressBar.value = value;
Adicionando uma barra de progresso indeterminado
Quando você não puder estimar quanto trabalho falta para concluir uma tarefa e a tarefa não bloquear a interação do usuário, use uma barra de progresso indeterminado. Em vez de mostrar uma barra que enche até o progresso ser concluído, uma barra de progresso indeterminado mostra uma animação de pontos movendo da esquerda para a direita. Para saber mais sobre quando usar uma barra de progresso indeterminado, veja as Diretrizes e lista de verificação de controles de progresso.
Para criar uma barra de progresso indeterminado
Para criar uma barra de progresso indeterminado, crie um elemento de progresso sem especificar um valor ou máx.
<!-- Create an indeterminate progress bar -->
<progress></progress>
Adicionando um anel de progresso indeterminado (somente Windows)
Quando você não puder estimar quanto trabalho falta para concluir uma tarefa e a tarefa bloquear a interação do usuário, use um anel de progresso indeterminado. Um anel de progresso indeterminado mostra uma sequência animada de pontos se movendo em círculo. Para saber mais sobre quando usar um anel de progresso indeterminado, veja as Diretrizes e lista de verificação de controles de progresso.
Para criar um anel de progresso indeterminado
Para criar um anel de progresso indeterminado, crie um elemento de progresso sem especificar um valor ou máx e defina a sua classe para win-ring.
<progress class="win-ring"></progress>
(A classe win-ring é um dos estilos fornecidos pela Biblioteca do Windows para JavaScript.)
O próximo exemplo mostra como criar um anel de progresso indeterminado que também exiba texto.
<label class="progressRingText">
<progress class="win-ring withText"></progress>Processing</label>
Aqui estão os estilos CSS que acompanham o exemplo anterior.
progress.withText
{
color: inherit; /* Uses the same text color as the page */
vertical-align: text-bottom; /* Makes the bottom of the control align with the bottom of its label */
}
/* Text style for a label for the progress ring */
.progressRingText
{
font-family: "Segoe UI";
}
/* Text style for a label for a default size progress ring */
.progressRingText
{
font-size: 11pt;
line-height: 15pt;
}
/* The margin to separate the ring and its label */
.progressRingText progress
{
margin-right: 5px;
}
Resumo e próximas etapas
Você aprendeu como criar tipos diferentes de controle de progresso.
No próximo tópico, Como definir o estilo de controles de progresso, você vai aprender mais como usar as classes CSS e WinJS para definir o estilo dos controles progress.
Depois disso, confira as Diretrizes e lista de verificação para controles de progresso, que mostram com mais detalhes quando e como usar o controle de progress.