raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-27 01:43:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style spinner SVG by inlining it

Browse Source 
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.
This commit is contained in:
Pau Perez
2020-06-03 11:13:03 +02:00
parent e6fa296d03
commit 7900cf9438
2 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/stylesheets/admin/components/progress.scss
View File

@@ -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;
}

22
app/views/spree/layouts/_admin_body.html.haml
View File

@@ -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)
\...