Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Cómo aplicar estilo a los controles de progreso (aplicaciones de la Tienda Windows con JavaScript y HTML)

[Esta documentación es preliminar y está sujeta a cambios.]

Aprende a usar hojas de estilos en cascada (CSS) y hojas de estilos de la Biblioteca de Windows para JavaScript para aplicar estilo a los controles progress.

Lo que debes saber

Tecnologías

Requisitos previos

  • Damos por sentado que sabes crear los tres tipos diferentes de control progress: la barra de progreso determinada, la barra de progreso indeterminada y el círculo de progreso indeterminado. Para aprender más sobre cómo agregar los diferentes tipos de controles progress, consulta Inicio rápido: Agregar controles de progreso.

Propiedades de CSS útiles

Estas propiedades de CSS son especialmente útiles para aplicar estilo al control progress:

width

Especifica el ancho del control de progreso. En el caso del círculo de progreso indeterminado, el ancho y el alto deberían ser iguales.

height

Especifica el alto del control de progreso. En el caso del círculo de progreso indeterminado, el ancho y el alto deberían ser iguales.

color

Especifica el color de la parte de barra de la barra de progreso determinada, además del color de los puntos de la barra de progreso indeterminada y el círculo de progreso indeterminado.

Este ejemplo crea una barra progress determinada con una barra azul.


<progress value="0.4" style="color: blue"  />

Seudoelementos para aplicar estilo a los controles de progreso

El control progress proporciona estos seudoelementos que puedes usar como selectores para aplicar estilo a partes concretas del control:

::-ms-fill

Aplica uno o varios estilos a la parte de barra de los controles progress determinados y controla la animación de los controles de progreso indeterminados.

Se aplican todos los estilos a la parte de barra de la barra de progreso determinada, excepto la propiedad de estilo animation-name, que controla la animación de la barra y el círculo de progreso indeterminados.

Este ejemplo hace que un control progress se muestre como un círculo de progreso 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 obtener más información sobre las distintas combinaciones de seudoelementos y otros selectores, consulta Descripción de selectores CSS.

Seudoclases para aplicar estilo a los controles de progreso

Este control admite las siguientes seudoclases que puedes usar como selectores para aplicar estilo al control cuando esté en determinados estados.

:indeterminate

Aplica uno o más estilos a un control progress en el estado indeterminado.

Este ejemplo define un estilo para los controles progress indeterminados.



progress:indeterminate {
    /* styling here */
}


Para obtener más información sobre las distintas combinaciones de seudoclases y otros selectores, consulta Descripción de selectores CSS.

Clases CSS de la Biblioteca de Windows para JavaScript para aplicar estilo a controles de progreso

La Biblioteca de Windows para JavaScript proporciona varias clases CSS para aplicar estilo al control progress.

Para usar estas clases, establece el atributo class del control en el nombre de la clase. Puedes asignar varias clases a un elemento; basta con que separes los nombres de las clases con un espacio. Este ejemplo aplica las clases win-ring y win-large a un control progress.


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

La Biblioteca de Windows para JavaScript proporciona varias clases CSS para aplicar estilo al control progress:

win-error

Pausa una barra progress determinada y hace que se muestre en el estilo de error.

win-large

Hace que el control progress sea grande. Usa este estilo para las operaciones modales de pantalla completa.

win-medium

Hace que el control progress sea mediano. Si vas a mostrar un círculo de progreso junto a texto de 20 puntos, usa esta clase.

win-paused

Pausa el progreso de una barra progress determinada.

win-ring

Hace que un control progress se muestre como un círculo de progreso indeterminado. Debes especificar el ancho y el alto de progress estableciendo las propiedades width y height o usando la clase win-medium o win-large.

Temas relacionados

Inicio rápido: Agregar controles de progreso
Directrices y lista de comprobación para controles de progreso
Descripción de los selectores CSS

 

 

Mostrar:
© 2018 Microsoft