Barras de progreso en HTML5

Anterior
Avanzar

Html5 nos permite crear fantásticas barras de progreso, en conjunto con Javascript se pueden crear barras dinámicas, por ejemplo para mostrar el avance de una tarea, un proceso, una medida o cualquier cosa que pueda ser representada mediante el elemento html que hoy aprenderemos.

Barras de progreso

Con la etiqueta <progress> podemos crear una barra de progreso.

<progress>…</progress>

Atributos para <progress>

  • Min: su valor será el valor mínimo de la barra de progreso.
  • Max: su valor será el valor máximo de la barra de progreso.
  • Value: su valor será un valor entre el valor mínimo y el valor máximo y se reflejara en la barra de progreso.

Ejemplo:

<progress min="0" max="100" value="75">este es un elemento de progreso no soportado por tu navegador, prueba con otro </progress>

Para crear una barra de progreso dinámico, que obedezca a eventos se requiere conocimientos de programación en javascript.

Lecciones de HTML5
Anterior
Avanzar
Te recomendamos leer:  Animaciones SVG, Trazos y Canvas en html5
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5