banner
hace 4 años
1084 Views

Barras de Progreso Html5

Autor:
banner

 
 
Hola amigos ya estoy aquí de nuevo, y os traigo la manera nueva y novedosa de crear barras de progreso mediante Html5. Estas nuevas funciones se realizan de manera muy rápida y intuitiva. Para realizar este ejercicio solo necesitaremos unas pocas lineas de código.

 

En estas lineas veremos la nueva etiqueta Html5, me refiero a la etiqueta <progress> que nos permite crear estas nuevas barras de progreso de manera rápida y fácil.

 

Pasando al ejercicio en si, solamente tendremos que crear un “div contenedor y dentro meteremos la barra y un titulo. En este tutorial crearemos 5 barras para medir nuestra base en lenguajes de programación web.


<div class="progress">
Html 5
 <progress id="html5" max="100" value="70"></progress>
 </div>
<div class="progress">
CSS 3
<progress id="css3" max="100" value="60"></progress>
 </div>
<div class="progress">
JavaScript
<progress id="javascript" max="100" value="65"></progress>
 </div>
<div class="progress">
PHP
<progress id="php" max="100" value="55"></progress>
 </div>
<div class="progress">
MySQL
 <progress id="mysql" max="100" value="50"></progress>
 </div>

 

Como podemos apreciar en la etiqueta progress necesita de dos valores, como son “max” “value“, uno indica el máximo posible y el otro nuestro valor en esa barra de progreso.
 

Por otro lado yo en mi ejercicio también he añadido el atributo “id” con el cual después podre dar estilo a cada una de las barras individualmente, no obstante si quisiese dar estilo a todas las barras de progreso utilizaría el atributoclass” con el mismo nombre para todas las barras.

 

Pasamos al Css; al estilo en si, creamos ciertas reglas básicas para dar estilo y compatibilidad a nuestras barras de progreso

 

progress[value] {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 border: none;
 width: 270px;
 height: 30px;
 overflow:hidden;
 border:1px inset #666; 
 border-radius : 10px ;
 }

En este código css podemos ver como primero eliminamos el estilo por defecto, en distintos navegadores. También quito el borde y pongo ciertas reglas para definir las dimensiones así como el tipo de borde y el radio de este.
 

Con esto ya podemos crear las barras de progreso Html5 mediante la etiqueta <progress> hemos realizado las barras de manera fácil e intuitiva, y en 3 lineas de código.

 

Estos nuevos recursos que nos ofrece Html5, nos permite crear proyectos cada vez mas profesionales

 

Para mas Información 

 

Sendoa

Sendoa

¡Aúpa! Me llamo Sendoa y soy un apasionado del Diseño y Desarrollo Web.

Fundador de WebSdcStudio.es; mi blog personal, donde expongo diferentes contenidos de ayuda, consejos, trucos, recursos... sobre el mundo del Diseño y Desarrollo Web.
Sendoa

Latest posts by Sendoa (see all)

Articulos Relacionados

Tags Artículos:
Artículos Categorías:
Desarrollo Web · Html5
banner

Deja un Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Left Menu Icon
Web Sdc Studio
Right Menu Icon