diff --git a/.gitignore b/.gitignore
index 496ee2c..8763996 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-.DS_Store
\ No newline at end of file
+.DS_Store
+test/
\ No newline at end of file
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..ee8fde8
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,19 @@
+{
+  "name": "SVG-Loaders",
+  "version": "0.0.0",
+  "homepage": "https://github.com/SamHerbert/SVG-Loaders",
+  "authors": [
+    "Sam Herbert <sam@samherbert.net>"
+  ],
+  "description": "Loading icons and small animations built purely in SVG, no CSS or JS.",
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "public"
+  ]
+}
diff --git a/public/index.html b/public/index.html
index f4b85e9..27f940e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -53,8 +53,8 @@
         }
         li:nth-child(3) {
             background-color: #F39C12;
-            background-image: url(../svg-loaders/ball-triangle.svg);
-            background-size: 60px;
+            background-image: url(../svg-loaders/grid.svg);
+            background-size: 40px;
         }
         li:nth-child(4) {
             background-color: #9B59B6;
@@ -64,7 +64,7 @@
         li:nth-child(5) {
             background-color: #3498DB;
             background-image: url(../svg-loaders/oval.svg);
-            background-size: 60px;
+            background-size: 50px;
         }
         li:nth-child(6) {
             background-color: #E74C3C;
@@ -74,26 +74,32 @@
         li:nth-child(7) {
             background-color: #2ECC71;
             background-image: url(../svg-loaders/spinning-circles.svg);
-            background-size: 60px;
+            background-size: 50px;
         }
         li:nth-child(8) {
             background-color: #2C3E50;
             background-image: url(../svg-loaders/puff.svg);
-            background-size: 60px;
+            background-size: 50px;
         }
         li:nth-child(9) {
             background-color: #F1C40F;
+            background-image: url(../svg-loaders/circles.svg);
+            background-size: 50px;
         }
         li:nth-child(10) {
             background-color: #8E44AD;
             background-image: url(../svg-loaders/tail-spin.svg);
-            background-size: 60px;
+            background-size: 50px;
         }
         li:nth-child(11) {
             background-color: #2980B9;
+            background-image: url(../svg-loaders/bars.svg);
+            background-size: 40px;
         }
         li:nth-child(12) {
             background-color: #E74C3C;
+            background-image: url(../svg-loaders/ball-triangle.svg);
+            background-size: 50px;
         }
         .actions {
             margin: auto;
@@ -147,7 +153,7 @@
 
     <div class="actions">
         <a href="https://github.com/SamHerbert/SVG-Loaders" target="_blank" class="download">Download</a>
-        <a href="#" target="_blank" class="tweet">Tweet</a>
+        <a href="https://twitter.com/intent/tweet?text=Fully%20SVG%20loaders/spinners&url=http://goo.gl/nuy8tM&via=sherb" target="_blank" class="tweet">Tweet</a>
     </div>
     <div style="clear: both"></div>
 
diff --git a/svg-loaders/audio.svg b/svg-loaders/audio.svg
index 160d25e..98b3beb 100644
--- a/svg-loaders/audio.svg
+++ b/svg-loaders/audio.svg
@@ -3,25 +3,25 @@
     <g transform="matrix(1 0 0 -1 0 80)">
         <rect width="10" height="20" rx="3">
             <animate attributeName="height"
-                 begin="0s" dur="3.3s"
+                 begin="0s" dur="4.3s"
                  values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear"
                  repeatCount="indefinite" />
         </rect>
         <rect x="15" width="10" height="80" rx="3">
             <animate attributeName="height"
-                 begin="0s" dur="1.9s"
+                 begin="0s" dur="2s"
                  values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear"
                  repeatCount="indefinite" />
         </rect>
         <rect x="30" width="10" height="50" rx="3">
             <animate attributeName="height"
-                 begin="0s" dur="1.6s"
+                 begin="0s" dur="1.4s"
                  values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear"
                  repeatCount="indefinite" />
         </rect>
         <rect x="45" width="10" height="30" rx="3">
             <animate attributeName="height"
-                 begin="0s" dur="1.6s"
+                 begin="0s" dur="2s"
                  values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear"
                  repeatCount="indefinite" />
         </rect>
diff --git a/svg-loaders/bars.svg b/svg-loaders/bars.svg
new file mode 100644
index 0000000..8c2dfdf
--- /dev/null
+++ b/svg-loaders/bars.svg
@@ -0,0 +1,52 @@
+<svg width="135" height="140" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#fff">
+    <rect y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin=".5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin=".5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="30" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin=".25s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin=".25s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="60" width="15" height="140" rx="6">
+        <animate attributeName="height"
+             begin="0s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="90" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin=".25s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin=".25s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="120" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin=".5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin=".5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+</svg>
diff --git a/svg-loaders/circles.svg b/svg-loaders/circles.svg
new file mode 100644
index 0000000..de8e4de
--- /dev/null
+++ b/svg-loaders/circles.svg
@@ -0,0 +1,20 @@
+<svg width="135" height="135" viewBox="0 0 135 135" xmlns="http://www.w3.org/2000/svg" fill="#fff">
+    <path d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z">
+        <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 67 67"
+            to="-360 67 67"
+            dur="2.5s"
+            repeatCount="indefinite"/>
+    </path>
+    <path d="M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z">
+        <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 67 67"
+            to="360 67 67"
+            dur="8s"
+            repeatCount="indefinite"/>
+    </path>
+</svg>
diff --git a/svg-loaders/grid.svg b/svg-loaders/grid.svg
new file mode 100644
index 0000000..140cb89
--- /dev/null
+++ b/svg-loaders/grid.svg
@@ -0,0 +1,56 @@
+<svg width="105" height="105" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg" fill="#fff">
+    <circle cx="12.5" cy="12.5" r="12.5">
+        <animate attributeName="fill-opacity"
+         begin="0s" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+    <circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5">
+        <animate attributeName="fill-opacity"
+         begin="100ms" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+    <circle cx="52.5" cy="12.5" r="12.5">
+        <animate attributeName="fill-opacity"
+         begin="300ms" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+    <circle cx="52.5" cy="52.5" r="12.5">
+        <animate attributeName="fill-opacity"
+         begin="600ms" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+    <circle cx="92.5" cy="12.5" r="12.5">
+        <animate attributeName="fill-opacity"
+         begin="800ms" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+    <circle cx="92.5" cy="52.5" r="12.5">
+        <animate attributeName="fill-opacity"
+         begin="400ms" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+    <circle cx="12.5" cy="92.5" r="12.5">
+        <animate attributeName="fill-opacity"
+         begin="700ms" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+    <circle cx="52.5" cy="92.5" r="12.5">
+        <animate attributeName="fill-opacity"
+         begin="500ms" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+    <circle cx="92.5" cy="92.5" r="12.5">
+        <animate attributeName="fill-opacity"
+         begin="200ms" dur="1s"
+         values="1;.2;1" calcMode="linear"
+         repeatCount="indefinite" />
+    </circle>
+</svg>