Compartir a través de

Cómo aplicar estilo a los controles de progreso (HTML)

  • Artículo

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Aprende a usar hojas de estilo 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 especifica la animación de los controles de progreso indeterminado.

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

    En este ejemplo, se hace que un control progress se muestre como un círculo de progreso intermedio.

    

/* 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 WinJS para aplicar estilo a los controles de progreso

WinJS 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. En este ejemplo, se aplican las clases win-ring y win-large a un control progress.

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

WinJS proporciona estas clases CSS para aplicar estilo al control progress:

  • win-error
    Pausa una barra de progress determinado y la muestra 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
    Muestra el control progress como un círculo de progreso indeterminado. Debes especificar el ancho y el alto del control progress estableciendo las propiedades width y height o usando las clases 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