Como definir o estilo de controles de progresso (HTML)

Artigo
03/04/2016

[ 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 ]

Aprenda como usar as Folhas de Estilo em Cascata (CSS) e as folhas de estilo da Biblioteca do Windows para JavaScript para definir o estilo de controles de progress.

O que você precisa saber

Tecnologias

Pré-requisitos

Pressupomos que você saiba como criar três tipos diferentes de controle de progress: a barra de progresso determinado, a barra de progresso indeterminado e o anel de progresso indeterminado. Para saber mais sobre como adicionar tipos diferentes de controles de progress, veja Guia de início rápido: adicionando controles de progresso.

Propriedades CSS úteis

Estas propriedades CSS são particularmente úteis para definir o estilo do controle de progress:

width
Especifica a largura do controle de progresso. Para um anel de progresso indeterminado, a largura e altura devem ser iguais.
height
Especifica a altura do controle de progresso. Para um anel de progresso indeterminado, a largura e altura devem ser iguais.
color
Especifica a cor da parte com barra na barra de progresso determinado e a cor dos pontos na barra de progresso indeterminado e no anel de progresso indeterminado.

Este exemplo cria uma barra de progress determinado azul.
```
<progress value="0.4" style="color: blue"  />
```

Pseudoelementos para definir o estilo de controles de progresso

O controle de progress fornece os seguintes pseudoelementos, que você pode usar como seletores para definir o estilo de partes específicas do controle:

::-ms-fill
Aplica um ou mais estilos à parte com barra de controles de progress determinados e especifica a animação dos controles de progresso indeterminado.

Todos os estilos são aplicados à parte com barra da barra de progresso determinado, com exceção da propriedade de estilo animation-name, que controla a animação da barra e do anel de progresso indeterminado.

Este exemplo faz com que um controle de progress seja exibido como um anel de progresso indeterminado.
```
/* Show the ring animation. This setting only works when
   you specify the width and height of the progress control */
#my-progress-ring::-ms-fill { animation-name: -ms-ring; }
```

(para saber mais sobre as diferentes formas de combinação de pseudoelementos e outros seletores, veja Noções básicas de seletores CSS).

Pseudoclasses para definir o estilo de controles de progresso

Este controle oferece suporte às seguintes pseudoclasses que você pode usar como seletores para definir o estilo do controle quando está em determinados estados.

:indeterminate
Aplica um ou mais estilos a um controle de progress em estado indeterminado.

Este exemplo define um estilo para controles de progress indeterminados
```
progress:indeterminate {
    /* styling here */
}
```

(para saber mais sobre as diferentes formas de combinação de pseudoclasses e outros seletores, veja Noções básicas de seletores CSS).

Classes CSS WinJS para definir o estilo dos controles de progresso

O WinJS oferece várias classes CSS para definir o estilo do controle progress.

Para usar essas classes, defina o atributo class do controle como o nome da classe. Você pode atribuir várias classes a um elemento, basta separar os nomes das classes com um espaço. Este exemplo aplica as classes win-ring e win-large a um controle de progress.

<progress class="win-ring win-large" />

O WinJS oferece estas classes CSS para definir o estilo do controle progress:

win-error
Pausa uma barra de progress determinado e a exibe no estilo de erro.
win-large
Deixa o controle de progress maior. Use este estilo para operações modais em tela inteira.
win-medium
Deixa o controle de progress com tamanho médio. Se você estiver exibindo um anel de progresso com texto de aproximadamente 20 pontos, use esta classe.
win-paused
Pausa o progresso de uma barra de progress determinado.
win-ring
Exibe o controle de progress como um anel de progresso indeterminado. Você deve especificar a largura e altura do controle de progress definindo as propriedades width e height ou usando a classe win-medium ou win-large.

Tópicos relacionados

Guia de início rápido: adicionando controles de progresso

Diretrizes e lista de verificação de controles de progresso

Noções básicas de seletores CSS

Share via