diff --git a/app/assets/images/loading.gif b/app/assets/images/loading.gif
deleted file mode 100644
index 31b6c2c752..0000000000
Binary files a/app/assets/images/loading.gif and /dev/null differ
diff --git a/app/assets/images/spinning-circles.svg b/app/assets/images/spinning-circles.svg
new file mode 100755
index 0000000000..258d405c49
--- /dev/null
+++ b/app/assets/images/spinning-circles.svg
@@ -0,0 +1,55 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(2 1)" stroke="#0096ad" stroke-width="1.5">
+            <circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#0096ad">
+                <animate attributeName="fill-opacity"
+                     begin="0s" dur="1.3s"
+                     values="1;0;0;0;0;0;0;0" calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+            <circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="#0096ad">
+                <animate attributeName="fill-opacity"
+                     begin="0s" dur="1.3s"
+                     values="0;1;0;0;0;0;0;0" calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+            <circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="#0096ad">
+                <animate attributeName="fill-opacity"
+                     begin="0s" dur="1.3s"
+                     values="0;0;1;0;0;0;0;0" calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+            <circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="#0096ad">
+                <animate attributeName="fill-opacity"
+                     begin="0s" dur="1.3s"
+                     values="0;0;0;1;0;0;0;0" calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+            <circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="#0096ad">
+                <animate attributeName="fill-opacity"
+                     begin="0s" dur="1.3s"
+                     values="0;0;0;0;1;0;0;0" calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+            <circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="#0096ad">
+                <animate attributeName="fill-opacity"
+                     begin="0s" dur="1.3s"
+                     values="0;0;0;0;0;1;0;0" calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+            <circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="#0096ad">
+                <animate attributeName="fill-opacity"
+                     begin="0s" dur="1.3s"
+                     values="0;0;0;0;0;0;1;0" calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+            <circle cx="27" cy="5" r="5" fill-opacity="0" fill="#0096ad">
+                <animate attributeName="fill-opacity"
+                     begin="0s" dur="1.3s"
+                     values="0;0;0;0;0;0;0;1" calcMode="linear"
+                     repeatCount="indefinite" />
+            </circle>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/assets/javascripts/templates/registration/images/logo.html.haml b/app/assets/javascripts/templates/registration/images/logo.html.haml
index 4b19c14cff..7dd08c90dc 100644
--- a/app/assets/javascripts/templates/registration/images/logo.html.haml
+++ b/app/assets/javascripts/templates/registration/images/logo.html.haml
@@ -40,6 +40,6 @@
             .message{ ng: { hide: "imageSrc() || imageUploader.isUploading" } }
               Your logo will appear here for review once uploaded
             .loading{ ng: { hide: "!imageUploader.isUploading" } }
-              %img.spinner{ src: "/assets/loading.gif" }
+              %img.spinner{ src: "/assets/spinning-circles.svg" }
               %br/
               Uploading...
diff --git a/app/assets/javascripts/templates/registration/images/promo.html.haml b/app/assets/javascripts/templates/registration/images/promo.html.haml
index d98721dc6d..6c3327c942 100644
--- a/app/assets/javascripts/templates/registration/images/promo.html.haml
+++ b/app/assets/javascripts/templates/registration/images/promo.html.haml
@@ -38,6 +38,6 @@
             .message{ ng: { hide: "imageSrc() || imageUploader.isUploading" } }
               Your logo will appear here for review once uploaded
             .loading{ ng: { hide: "!imageUploader.isUploading" } }
-              %img.spinner{ src: "/assets/loading.gif" }
+              %img.spinner{ src: "/assets/spinning-circles.svg" }
               %br/
               Uploading...
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index bf1b519fde..e247d7e3f2 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -26,10 +26,10 @@
     %product{"ng-show" => "Products.loading"}
       .row.summary
         .small-12.columns.text-center
-          Loading products
+          Loading products...
       .row
         .small-12.columns.text-center
-          %img.spinner{ src: "/assets/loading.gif" }
+          %img.spinner{ src: "/assets/spinning-circles.svg" }
 
     %div{"ng-show" => "filteredProducts.length == 0 && !Products.loading"}
       .row.summary
diff --git a/app/views/spree/admin/orders/bulk_management.html.haml b/app/views/spree/admin/orders/bulk_management.html.haml
index f701813e9e..61bf9fbb7e 100644
--- a/app/views/spree/admin/orders/bulk_management.html.haml
+++ b/app/views/spree/admin/orders/bulk_management.html.haml
@@ -95,7 +95,7 @@
               %span{ :class => 'one column alpha', :style => 'text-align: center'} {{ column.visible && "&#10003;" || !column.visible && "&nbsp;" }}
               %span{ :class => 'two columns omega' } {{column.name }}
   %div.sixteen.columns.alpha#loading{ 'ng-if' => 'loading' }
-    %img.spinner{ src: "/assets/loading.gif" }
+    %img.spinner{ src: "/assets/spinning-circles.svg" }
     %h1 LOADING ORDERS
   %div{ :class => "sixteen columns alpha", 'ng-show' => '!loading && filteredLineItems.length == 0'}
     %h1#no_results No orders found.
diff --git a/app/views/spree/admin/products/bulk_edit/_indicators.html.haml b/app/views/spree/admin/products/bulk_edit/_indicators.html.haml
index d6ce039231..4760dacaeb 100644
--- a/app/views/spree/admin/products/bulk_edit/_indicators.html.haml
+++ b/app/views/spree/admin/products/bulk_edit/_indicators.html.haml
@@ -2,7 +2,7 @@
   {{ api_error_msg }}
 
 %div.sixteen.columns.alpha#loading{ 'ng-if' => 'loading' }
-  %img.spinner{ src: "/assets/loading.gif" }
+  %img.spinner{ src: "/assets/spinning-circles.svg" }
   %h1 LOADING PRODUCTS
 
 %div.sixteen.columns.alpha{ 'ng-show' => '!loading && filteredProducts.length == 0 && query.length==0' }