DanGrecks ~ ¡Ayuda WebMaster!

Barra de Porcentaje

Bueno amigos este tutorial es creado y adaptado 100% por DanGrecks (AnGrecK).

Empezaremos con el codigo CSS; Este codigo lo pondrán en CSS-Code Sin Style Tags de editar Diseño en PWG.

Codigo CSS:
.progress { height: 110px; margin: 80px 0; background: url(http://4.bp.blogspot.com/-JRfhyUNyuz4/TdlEMivmx_I/AAAAAAAAFQM/rAxjbRcTjko/s1600/progress-container.png) no-repeat; position: relative; } .txt-launch-day-hat { background: url(http://2.bp.blogspot.com/-QHraJCthPmQ/TdlEXWOJTHI/AAAAAAAAFQU/qIxWNvEf_ao/s1600/txt-launch-day-hat.png) no-repeat; width: 117px; height: 159px; position: absolute; top: -120px; right: -45px; } .txt-launch-day { background: url(http://2.bp.blogspot.com/-ib4huil5zqQ/TdlEeNBO5xI/AAAAAAAAFQc/fTvxtBq6v9A/s1600/txt-launch-day.png) no-repeat; width: 112px; height: 110px; position: absolute; top: -80px; right: -40px; } .progress-bar { height: 43px; background: #72dbf1 url(http://1.bp.blogspot.com/-lrGDwjHJZKE/TdlElCIJDrI/AAAAAAAAFQk/b4Ni6wg1TDU/s1600/progress-bar.png) repeat-x; position: absolute; top:14px; left: 0px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .progress-bar-container { width: 930px; height: 70px; margin-left: 13px; position: relative; } .mailing-list h2 { width: 400px; float: left; } .mailing-list form { display: block; width: 450px; float: right; margin: 5px 0 0 0; }

Y seguimos con el HTML; Este codigo lo pondremos donde querramos que aparezca la Barra de Porcentaje .

Codigo HTML:
<section class='progress'> <div class='progress-bar-container' id='tipsy' title='40% Complete'> <article class='progress-bar' style='width:40%'></article> </div> <article class='txt-launch-day-hat'></article> </section>

*Solo Cambias El 40% por el Porcentaje que quieres que lleve la Barra.

Y si todo salío bien quedara Así;
No se alcanza apreciar bien la barra, ya que este diseño no esta tan ancho en el contenido; Ver Online.