Barra de carga de contenido con CSS
El elemento que vamos a tratar en este artículo lo podríamos utilizar para barras de carga de contenido o otra utilidad podría ser para representar porcentajes de encuestas publicadas en tu Web.
La barra, además de mostrarse de forma agradable también tiene un efecto que dura 2 segundos de desplazamiento del contenido hasta su desplazamiento correcto según el porcentaje. Esto lo conseguimos con CSS.
El estilo es totalmente editable a través de CSS. En el caso del ejemplo no utilizamos imágenes de fondo para obtener un estilo más profesional.
Para conseguir este hecho, deberemos tener e incluir un hoja de estilos CSS con el siguiente código en nuestra página:
.progress-bar {
border: 2px solid red;
border-radius: 14px;
}
.progress-bar > div {
color: white;
background: red;
overflow: hidden;
white-space: nowrap;
padding: 10px 20px;
border-radius: 10px;
-webkit-animation: progress-bar 2s;
-moz-animation: progress-bar 2s;
}
@-webkit-keyframes progress-bar {
0% { width: 0; }
}
@-moz-keyframes progress-bar {
0% { width: 0; }
}
Luego dentro del <body> solo hará falta algo como esto:
<div class="progress-bar"> <div style="width: 75%">Upload is 75% complete.</div> </div>
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
73 artículos que te podrían interesar
Ver más sobre
Deja una respuesta