Fancy Progress Bars With SVG Patterns – Bars

Category: Javascript , Loading | October 24, 2018
Author: lucagez
Views Total: 1,178
Official Page: Go to website
Last Update: October 24, 2018
License: MIT

Preview:

Fancy Progress Bars With SVG Patterns – Bars

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.

You Might Be Interested In:


One thought on “Fancy Progress Bars With SVG Patterns – Bars

Leave a Reply