initial commit

rendro · Nov 19, 2012 · 0dad7de · 0dad7de
commit 0dad7de
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Readme.md 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))
diff --git a/images/fading-loader.svg b/images/fading-loader.svg
diff --git a/images/spinning-loader.svg b/images/spinning-loader.svg
diff --git a/index.html 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>