diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..10f526f
Binary files /dev/null and b/.DS_Store differ
diff --git a/Readme.md b/Readme.md
new file mode 100644
index 0000000..f41217f
--- /dev/null
+++ b/Readme.md
@@ -0,0 +1,20 @@
+# SVG Spinner
+
+Modern loading spinner without JavaScript or unnecessary DOM Elements. The spinner and animations are implemented as SVG (fully scalable).
+
+## Browser Support:
+
+* IE 9+
+* Firefox 4+
+* Chrome 4+
+* Safari (3.2+ partial, 5+ full)
+* Opera 9.5+
+* iOS (3.2+ partial, 4.2+ full)
+* Opera Mini 5+
+* Android Browser 3+
+* Blackberry Browser 7+
+* Opera Mini 10+
+* Chrome for Android 18+
+* Firefox for Android 15+
+
+(see: [Can I Use: SVG in CSS backgrounds](http://caniuse.com/#feat=svg-css))
\ No newline at end of file
diff --git a/images/fading-loader.svg b/images/fading-loader.svg
new file mode 100644
index 0000000..2b50e94
--- /dev/null
+++ b/images/fading-loader.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="110px" height="110px">
+  <g transform="translate(5 5)">
+    <circle cx="50" cy="0" r="5" style="opacity:0.3">
+      <animate attributeType="CSS" attributeName="opacity" from="1" to="0.3" dur="1.2s" repeatCount="indefinite" begin="0s" />
+    </circle>
+    <circle cx="75" cy="6.6987298" r="5" style="opacity:0.3">
+      <animate attributeType="CSS" attributeName="opacity" from="1" to="0.3" dur="1.2s" repeatCount="indefinite" begin="0.1s" />
+    </circle>
+    <circle cx="93.3012702" cy="25" r="5" style="opacity:0.3">
+      <animate attributeType="CSS" attributeName="opacity" from="1" to="0.3" dur="1.2s" repeatCount="indefinite" begin="0.2s" />
+    </circle>
+    <circle cx="100" cy="50" r="5" style="opacity:0.3">
+      <animate attributeType="CSS" attributeName="opacity" from="1" to="0.3" dur="1.2s" repeatCount="indefinite" begin="0.3s" />
+    </circle>
+    <circle cx="93.3012702" cy="75" r="5" style="opacity:0.3">
+      <animate attributeType="CSS" attributeName="opacity" from="1" to="0.3" dur="1.2s" repeatCount="indefinite" begin="0.4s" />
+    </circle>
+    <circle cx="75" cy="93.3012702" r="5" style="opacity:0.3">
+      <animate attributeType="CSS" attributeName="opacity" from="1" to="0.3" dur="1.2s" repeatCount="indefinite" begin="0.5s" />
+    </circle>
+    <circle cx="50" cy="100" r="5" style="opacity:0.3">
+      <animate attributeType="CSS" attributeName="opacity" from="1" to="0.3" dur="1.2s" repeatCount="indefinite" begin="0.6s" />
+    </circle>
+    <circle cx="25" cy="93.3012702" r="5" style="opacity:0.3">
+      <animate attributeType="CSS" attributeName="opacity" from="1" to="0.3" dur="1.2s" repeatCount="indefinite" begin="0.7s" />
+    </circle>
+    <circle cx="6.6987298" cy="75" r="5" style="opacity:0.3">
+      <animate attributeType="CSS" attributeName="opacity" from="1" to="0.3" dur="1.2s" repeatCount="indefinite" begin="0.8s" />
+    </circle>
+    <circle cx="0" cy="50" r="5" style="opacity:0.3">
+      <animate attributeType="CSS" attributeName="opacity" from="1" to="0.3" dur="1.2s" repeatCount="indefinite" begin="0.9s" />
+    </circle>
+    <circle cx="6.6987298" cy="25" r="5" style="opacity:0.3">
+      <animate attributeType="CSS" attributeName="opacity" from="1" to="0.3" dur="1.2s" repeatCount="indefinite" begin="1s" />
+    </circle>
+    <circle cx="25" cy="6.6987298" r="5" style="opacity:0.3">
+      <animate attributeType="CSS" attributeName="opacity" from="1" to="0.3" dur="1.2s" repeatCount="indefinite" begin="1.1s" />
+    </circle>
+  </g>
+</svg>
diff --git a/images/spinning-loader.svg b/images/spinning-loader.svg
new file mode 100644
index 0000000..a282649
--- /dev/null
+++ b/images/spinning-loader.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="110px" height="110px">
+  <g>
+    <circle cx="50" cy="0" r="5" transform="translate(5 5)"/>
+    <circle cx="75" cy="6.6987298" r="5" transform="translate(5 5)"/>
+    <circle cx="93.3012702" cy="25" r="5" transform="translate(5 5)"/>
+    <circle cx="100" cy="50" r="5" transform="translate(5 5)"/>
+    <circle cx="93.3012702" cy="75" r="5" transform="translate(5 5)"/>
+    <circle cx="75" cy="93.3012702" r="5" transform="translate(5 5)"/>
+    <circle cx="50" cy="100" r="5" transform="translate(5 5)"/>
+    <circle cx="25" cy="93.3012702" r="5" transform="translate(5 5)"/>
+    <circle cx="6.6987298" cy="75" r="5" transform="translate(5 5)"/>
+    <circle cx="0" cy="50" r="5" transform="translate(5 5)"/>
+    <circle cx="6.6987298" cy="25" r="5" transform="translate(5 5)"/>
+    <circle cx="25" cy="6.6987298" r="5" transform="translate(5 5)"/>
+
+    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 55 55" to="360 55 55" dur="3s" repeatCount="indefinite" />
+  </g>
+</svg>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..abdbf79
--- /dev/null
+++ b/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <title>SVG Spinner</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
+    <style type="text/css">
+      .spin {
+        background: url('images/spinning-loader.svg') 50% 50% no-repeat;
+        background-size: 50px 50px;
+        height: 50px;
+        width: 50px;
+        margin: 50px auto;
+      }
+      .spin:nth-child(2) {
+        background-image: url('images/fading-loader.svg');
+      }
+    </style>
+  </head>
+  <body>
+    <div class="spin"></div>
+    <div class="spin"></div>
+  </body>
+</html>