From 7900cf9438dfa90003f1ad2dd0adf485caa35cf8 Mon Sep 17 00:00:00 2001
From: Pau Perez <saulopefa@gmail.com>
Date: Wed, 3 Jun 2020 11:13:03 +0200
Subject: [PATCH] Style spinner SVG by inlining it

This way we can tweak the `fill` property of the SVG and style it with
CSS as the documented in the author's repo
(https://github.com/SamHerbert/SVG-Loaders)

> An icon's color can be manipulated by changing the fill attribute in
the SVG file.
---
 .../admin/components/progress.scss            |  5 +++--
 app/views/spree/layouts/_admin_body.html.haml | 22 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/admin/components/progress.scss b/app/assets/stylesheets/admin/components/progress.scss
index f595b54072..c3ea8c69b3 100644
--- a/app/assets/stylesheets/admin/components/progress.scss
+++ b/app/assets/stylesheets/admin/components/progress.scss
@@ -20,10 +20,11 @@
   text-align: center;
   text-transform: uppercase;
 
-  img {
+  .spinner {
     position: absolute;
-    height: 30px;
     left: 50%;
+    width: 30px;
+    height: 30px;
     top: -5px;
     margin-left: -15px;
   }
diff --git a/app/views/spree/layouts/_admin_body.html.haml b/app/views/spree/layouts/_admin_body.html.haml
index d4d8058c7a..0bf05450ed 100644
--- a/app/views/spree/layouts/_admin_body.html.haml
+++ b/app/views/spree/layouts/_admin_body.html.haml
@@ -10,7 +10,27 @@
     .flash.success= flash[:success]
 
   #progress
-    %img.spinner{ src: "/assets/spinning-circles.svg" }
+    / By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL
+    %svg{:class => "spinner", :viewbox => "0 0 58 58", :xmlns => "http://www.w3.org/2000/svg"}
+      %g{:fill => "none", "fill-rule" => "evenodd"}
+        %g{:stroke => "currentColor", "stroke-width" => "1.5", :transform => "translate(2 1)"}
+          %circle{:cx => "42.601", :cy => "11.462", :fill => "currentColor", "fill-opacity" => "1", :r => "5"}
+            %animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "1;0;0;0;0;0;0;0"}
+          %circle{:cx => "49.063", :cy => "27.063", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
+            %animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;1;0;0;0;0;0;0"}
+          %circle{:cx => "42.601", :cy => "42.663", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
+            %animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;1;0;0;0;0;0"}
+          %circle{:cx => "27", :cy => "49.125", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
+            %animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;0;1;0;0;0;0"}
+          %circle{:cx => "11.399", :cy => "42.663", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
+            %animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;0;0;1;0;0;0"}
+          %circle{:cx => "4.938", :cy => "27.063", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
+            %animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;0;0;0;1;0;0"}
+          %circle{:cx => "11.399", :cy => "11.462", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
+            %animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;0;0;0;0;1;0"}
+          %circle{:cx => "27", :cy => "5", :fill => "currentColor", "fill-opacity" => "0", :r => "5"}
+            %animate{:attributename => "fill-opacity", :begin => "0s", :calcmode => "linear", :dur => "1.3s", :repeatcount => "indefinite", :values => "0;0;0;0;0;0;0;1"}
+
     = Spree.t(:loading)
     \...