Componente de barra de progreso animado con CSS puro

Vista prévia

Descripción

Una solución única de CSS que facilita la representación de barras de progreso interactivas, con animaciones de CSS3, como Bootstrap, en su página web.

Funcionamiento

Para empezar, sólo tiene que incluir el cssProgress. CSS en la sección head del documento y estamos listos para ir.

<link rel="stylesheet" href="cssProgress.css">

Cree una barra de progreso básica.

<div class="cssProgress">

<div class="progress1">


<div class="cssProgress-bar" data-percent="75">



<span class="cssProgress-label">75%</span>


 </div>

</div>
</div>

Cree una barra de progreso con bordes redondeados.

<div class="cssProgress">

<div class="progress2">


<div class="cssProgress-bar" data-percent="75">



<span class="cssProgress-label">75%</span>


 </div>

</div>
</div>

Cree una barra de progreso con un fondo personalizado.

<div class="cssProgress">

<div class="progress3">


<div class="cssProgress-bar" data-percent="75">



 <span class="cssProgress-label">75%</span>


 </div>

</div>
</div>

Crea una barra de progreso con franjas.

<div class="cssProgress">

<div class="progress1">


<div class="cssProgress-bar cssProgress-info cssProgress-stripes" data-percent="75">



 <span class="cssProgress-label">75%</span>


 </div>

</div>
</div>

Crea una barra de progreso con franjas animadas.

<div class="cssProgress">

<div class="progress1">


<div class="cssProgress-bar cssProgress-active" data-percent="75">



 <span class="cssProgress-label">75%</span>


 </div>

</div>
</div>