Animar barra de progreso en HTML5 y CSS3
0 Me Gusta
| diciembre 22, 2011 |
En este tutorial veremos como hacer una barra de progreso o de precarga en HTML5 y CSS3.
En ocasiones necesitamos barras de progreso para diferentes secciones de nuestros desarrollos Web. Ya sea para precargar una imagen, una galería o incluso un video, y ésta es la oportunidad para dar un toque mucho más elegante.
Primero, maquetamos el HTML5:
Código :
<!DOCTYPE html> <html lang=”es”> <head> <title>Barra de progreso – Demo – John W. Martinez</title> </head> <body> <script src=”http://code.jquery.com/jquery-latest.min.js”></script> <div id=”contenedor”> <div> <span style=”width: 1%” id=”progresito”> </span> </div> </div> </body> </html>
El código no tiene nada de novedoso si ya has trabajado con HTML5. Sin embargo, la etiqueta que se encarga del progreso tiene algunos elementos importantes que es necesario destacar:
- progress-bar (class): Es la etiqueta con la que vamos a definir los parametros principales de nuestro precargador.
- blue …
Continua leyendo desde la fuenteRelated posts:
- Formulario de contacto en HTML5 y CSS3 Hola a todos, espero que se encuentren muy bien. Vamos...
- HTML5 y CSS3 en Dreamweaver CS5.5 Los desarrolladores web podemos ver una luz al final del...
- Transición de color con HTML5 Y CSS3 Afinamos el efecto de transición cambiando colores directamente en HTML5...
- Activar CSS3 y HTML5 en editor de Visual Studio 2010 Comparto este sencillo tutorial para activar la sensibilidad del editor...
Related posts brought to you by Yet Another Related Posts Plugin.
Leave a Reply