P U B L I

Barra De Porcentaje

Una muy útil y simple barra que podemos usar para mostrar progresos, por ejemplo, para una web en construcción, el porcentaje de la web que esta finalizado.

EL HTML
Este es el código que tenemos que poner donde queramos que aparezca la barra, de aquí solo hay que editar <div class="porcentaje-visual">70%</div>
<div class="container-barra">
<div class="barra-outer"><div class="barra-interior"></div></div>
<div style="clear:both"></div>
<div class="porcentaje">  <div class="esquinita"></div>
  <div class="porcentaje-visual">70%</div></div>
</div>

EL CSS
Este es el código que hará la "magia", para editar la barra hay que modificar las partes resaltadas
.container-barra {
width: 80%;
margin: 10px 10%;
}
.barra-outer {
width: 100%;
height: 32px;
border: 3px solid #313438;
background: #212326;
}
.barra-interior {
width: 70%; /* MODIFICAR AQUI: esto es el ancho de la barra */
height: 32px;
background: #9dd659;
}
.porcentaje {
margin-left: 70%; /* MODIFICAR AQUI: esto es el margen del porcentaje textual, tiene que ser igual que el ancho de la barra */
float: left;
padding-left: 3px;
}
.porcentaje .esquinita {
width: 1px;
height: 1px;
border-top: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #313438;
}
.porcentaje .porcentaje-visual {
background: #313438;
padding: 5px;
border-radius: 0px 5px 5px 5px;
text-align: center;
color: #fff;
}

70%

Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?

Registrarse gratis

P U B L I

Navegación

Bitt Net En Las Redes

Bitt Net

Barra De Porcentaje

Barra De Porcentaje

EL HTML

EL CSS