Barras de progreso de fantasía con patrones SVG-barras

Vista prévia

Descripción

La biblioteca de barras le permite crear barras de progreso de fantasía llenas de patrones SVG al procesar.

Available SVG patterns:

1. overlap
2. leaf
3. bars
4. lines
5. wiggle
6. dots
7. circuit
8. aztec
9. bees
10. food
11. clouds
12. stripes
13. crosses
14. jupiter
15. piano
16. dominos
17. pie
18. floor
19. bubbles
20. ticTac
21. zigZag

Funcionamiento

Inserte el JavaScript bars. js y StyleSheet bars. CSS en el documento.

<link rel="stylesheet" href="bars.css">
<script src="bars.js"></script>

Cree las barras de progreso de la siguiente manera:

<div class="progress">

<div class="bar shadow overlap"></div>
</div>
<div class="progress">

<div class="bar shadow leaf"></div>
</div>
<div class="progress">

<div class="bar shadow bars"></div>
</div>
<div class="progress">

<div class="bar shadow lines"></div>
</div>
<div class="progress">

<div class="bar shadow wiggle"></div>
</div>
<div class="progress">

<div class="bar shadow dots"></div>
</div>
<div class="progress">

<div class="bar shadow circuit"></div>
</div>
<div class="progress">

<div class="bar shadow aztec"></div>
</div>
<div class="progress">

<div class="bar shadow bees"></div>
</div>
<div class="progress">

<div class="bar shadow food"></div>
</div>
<div class="progress">

<div class="bar shadow clouds"></div>
</div>
<div class="progress">

<div class="bar shadow stripes"></div>
</div>
<div class="progress">

<div class="bar shadow crosses"></div>
</div>
<div class="progress">

<div class="bar shadow jupiter"></div>
</div>
<div class="progress">

<div class="bar shadow piano"></div>
</div>
<div class="progress">

<div class="bar shadow dominos"></div>
</div>
<div class="progress">

<div class="bar shadow pie"></div>
</div>
<div class="progress">

<div class="bar shadow floor"></div>
</div>
<div class="progress">

<div class="bar shadow bubbles"></div>
</div>
<div class="progress">

<div class="bar shadow ticTac"></div>
</div>
<div class="progress">

<div class="bar shadow zigZag"></div>
</div>

Registro de cambios

10/24/2018

• Se han añadido clases y animaciones indeterminadas para cada barra de progreso.