Fancy Progress Bars With SVG Patterns – Bars

Preview:

Description:

The Bars library lets you create fancy progress bars filled with SVG patterns when processing.

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

How to use it:

Insert the JavaScript bars.js and Stylesheet bars.css into the document.

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

Create the progress bars as follows:

<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>

Changelog:

10/24/2018

• Added indeterminate classes and animations for each progress bar.