@@ -4,193 +4,190 @@ import React.Basic (JSX)
44import React.Basic.DOM as R
55import React.Basic.DOM.SVG as SVG
66
7−spinner :: JSX
7+spinner ∷ JSX
88spinner = SVG.svg
9− { xmlns: "http://www.w3.org/2000/svg"
10− , style: R.css { margin: "auto", background: "#f1f2f3", display: "block" }
11− , width: "91"
12− , height: "91"
13− , viewBox: "0 0 100 100"
14− , preserveAspectRatio: "xMidYMid"
15− , children:
16− [ SVG.rect
17− { x: "48.5"
18− , y: "38.5"
19− , rx: "0"
20− , ry: "0"
21− , width: "3"
22− , height: "7"
23− , fill: "#0a0a0a"
24− , children:
25− [ SVG.animate
26− { attributeName: "opacity"
27− , values: "1;0"
28− , keyTimes: "0;1"
29− , dur: "1s"
30− , begin: "-0.8888888888888888s"
31− , repeatCount: "indefinite"
32− }
33− ]
34− }
35− , SVG.rect
36− { x: "48.5"
37− , y: "38.5"
38− , rx: "0"
39− , ry: "0"
40− , width: "3"
41− , height: "7"
42− , fill: "#0a0a0a"
43− , transform: "rotate(40 50 50)"
44− , children:
45− [ SVG.animate
46− { attributeName: "opacity"
47− , values: "1;0"
48− , keyTimes: "0;1"
49− , dur: "1s"
50− , begin: "-0.7777777777777778s"
51− , repeatCount: "indefinite"
52− }
53− ]
54− }
55− , SVG.rect
56− { x: "48.5"
57− , y: "38.5"
58− , rx: "0"
59− , ry: "0"
60− , width: "3"
61− , height: "7"
62− , fill: "#0a0a0a"
63− , transform: "rotate(80 50 50)"
64− , children:
65− [ SVG.animate
66− { attributeName: "opacity"
67− , values: "1;0"
68− , keyTimes: "0;1"
69− , dur: "1s"
70− , begin: "-0.6666666666666666s"
71− , repeatCount: "indefinite"
72− }
73− ]
74− }
75− , SVG.rect
76− { x: "48.5"
77− , y: "38.5"
78− , rx: "0"
79− , ry: "0"
80− , width: "3"
81− , height: "7"
82− , fill: "#0a0a0a"
83− , transform: "rotate(120 50 50)"
84− , children:
85− [ SVG.animate
86− { attributeName: "opacity"
87− , values: "1;0"
88− , keyTimes: "0;1"
89− , dur: "1s"
90− , begin: "-0.5555555555555556s"
91− , repeatCount: "indefinite"
92− }
93− ]
94− }
95− , SVG.rect
96− { x: "48.5"
97− , y: "38.5"
98− , rx: "0"
99− , ry: "0"
100− , width: "3"
101− , height: "7"
102− , fill: "#0a0a0a"
103− , transform: "rotate(160 50 50)"
104− , children:
105− [ SVG.animate
106− { attributeName: "opacity"
107− , values: "1;0"
108− , keyTimes: "0;1"
109− , dur: "1s"
110− , begin: "-0.4444444444444444s"
111− , repeatCount: "indefinite"
112− }
113− ]
114− }
115− , SVG.rect
116− { x: "48.5"
117− , y: "38.5"
118− , rx: "0"
119− , ry: "0"
120− , width: "3"
121− , height: "7"
122− , fill: "#0a0a0a"
123− , transform: "rotate(200 50 50)"
124− , children:
125− [ SVG.animate
126− { attributeName: "opacity"
127− , values: "1;0"
128− , keyTimes: "0;1"
129− , dur: "1s"
130− , begin: "-0.3333333333333333s"
131− , repeatCount: "indefinite"
132− }
133− ]
134− }
135− , SVG.rect
136− { x: "48.5"
137− , y: "38.5"
138− , rx: "0"
139− , ry: "0"
140− , width: "3"
141− , height: "7"
142− , fill: "#0a0a0a"
143− , transform: "rotate(240 50 50)"
144− , children:
145− [ SVG.animate
146− { attributeName: "opacity"
147− , values: "1;0"
148− , keyTimes: "0;1"
149− , dur: "1s"
150− , begin: "-0.2222222222222222s"
151− , repeatCount: "indefinite"
152− }
153− ]
154− }
155− , SVG.rect
156− { x: "48.5"
157− , y: "38.5"
158− , rx: "0"
159− , ry: "0"
160− , width: "3"
161− , height: "7"
162− , fill: "#0a0a0a"
163− , transform: "rotate(280 50 50)"
164− , children:
165− [ SVG.animate
166− { attributeName: "opacity"
167− , values: "1;0"
168− , keyTimes: "0;1"
169− , dur: "1s"
170− , begin: "-0.1111111111111111s"
171− , repeatCount: "indefinite"
172− }
173− ]
174− }
175− , SVG.rect
176− { x: "48.5"
177− , y: "38.5"
178− , rx: "0"
179− , ry: "0"
180− , width: "3"
181− , height: "7"
182− , fill: "#0a0a0a"
183− , transform: "rotate(320 50 50)"
184− , children:
185− [ SVG.animate
186− { attributeName: "opacity"
187− , values: "1;0"
188− , keyTimes: "0;1"
189− , dur: "1s"
190− , begin: "0s"
191− , repeatCount: "indefinite"
192− }
193− ]
194− }
195− ]
196− }
9+ { xmlns: "http://www.w3.org/2000/svg"
10+ , viewBox: "38 38 24 24"
11+ , preserveAspectRatio: "xMidYMid"
12+ , children:
13+ [ SVG.rect
14+ { x: "48.5"
15+ , y: "38.5"
16+ , rx: "0"
17+ , ry: "0"
18+ , width: "3"
19+ , height: "7"
20+ , fill: "currentColor"
21+ , children:
22+ [ SVG.animate
23+ { attributeName: "opacity"
24+ , values: "1;0"
25+ , keyTimes: "0;1"
26+ , dur: "1s"
27+ , begin: "-0.8888888888888888s"
28+ , repeatCount: "indefinite"
29+ }
30+ ]
31+ }
32+ , SVG.rect
33+ { x: "48.5"
34+ , y: "38.5"
35+ , rx: "0"
36+ , ry: "0"
37+ , width: "3"
38+ , height: "7"
39+ , fill: "currentColor"
40+ , transform: "rotate(40 50 50)"
41+ , children:
42+ [ SVG.animate
43+ { attributeName: "opacity"
44+ , values: "1;0"
45+ , keyTimes: "0;1"
46+ , dur: "1s"
47+ , begin: "-0.7777777777777778s"
48+ , repeatCount: "indefinite"
49+ }
50+ ]
51+ }
52+ , SVG.rect
53+ { x: "48.5"
54+ , y: "38.5"
55+ , rx: "0"
56+ , ry: "0"
57+ , width: "3"
58+ , height: "7"
59+ , fill: "currentColor"
60+ , transform: "rotate(80 50 50)"
61+ , children:
62+ [ SVG.animate
63+ { attributeName: "opacity"
64+ , values: "1;0"
65+ , keyTimes: "0;1"
66+ , dur: "1s"
67+ , begin: "-0.6666666666666666s"
68+ , repeatCount: "indefinite"
69+ }
70+ ]
71+ }
72+ , SVG.rect
73+ { x: "48.5"
74+ , y: "38.5"
75+ , rx: "0"
76+ , ry: "0"
77+ , width: "3"
78+ , height: "7"
79+ , fill: "currentColor"
80+ , transform: "rotate(120 50 50)"
81+ , children:
82+ [ SVG.animate
83+ { attributeName: "opacity"
84+ , values: "1;0"
85+ , keyTimes: "0;1"
86+ , dur: "1s"
87+ , begin: "-0.5555555555555556s"
88+ , repeatCount: "indefinite"
89+ }
90+ ]
91+ }
92+ , SVG.rect
93+ { x: "48.5"
94+ , y: "38.5"
95+ , rx: "0"
96+ , ry: "0"
97+ , width: "3"
98+ , height: "7"
99+ , fill: "currentColor"
100+ , transform: "rotate(160 50 50)"
101+ , children:
102+ [ SVG.animate
103+ { attributeName: "opacity"
104+ , values: "1;0"
105+ , keyTimes: "0;1"
106+ , dur: "1s"
107+ , begin: "-0.4444444444444444s"
108+ , repeatCount: "indefinite"
109+ }
110+ ]
111+ }
112+ , SVG.rect
113+ { x: "48.5"
114+ , y: "38.5"
115+ , rx: "0"
116+ , ry: "0"
117+ , width: "3"
118+ , height: "7"
119+ , fill: "currentColor"
120+ , transform: "rotate(200 50 50)"
121+ , children:
122+ [ SVG.animate
123+ { attributeName: "opacity"
124+ , values: "1;0"
125+ , keyTimes: "0;1"
126+ , dur: "1s"
127+ , begin: "-0.3333333333333333s"
128+ , repeatCount: "indefinite"
129+ }
130+ ]
131+ }
132+ , SVG.rect
133+ { x: "48.5"
134+ , y: "38.5"
135+ , rx: "0"
136+ , ry: "0"
137+ , width: "3"
138+ , height: "7"
139+ , fill: "currentColor"
140+ , transform: "rotate(240 50 50)"
141+ , children:
142+ [ SVG.animate
143+ { attributeName: "opacity"
144+ , values: "1;0"
145+ , keyTimes: "0;1"
146+ , dur: "1s"
147+ , begin: "-0.2222222222222222s"
148+ , repeatCount: "indefinite"
149+ }
150+ ]
151+ }
152+ , SVG.rect
153+ { x: "48.5"
154+ , y: "38.5"
155+ , rx: "0"
156+ , ry: "0"
157+ , width: "3"
158+ , height: "7"
159+ , fill: "currentColor"
160+ , transform: "rotate(280 50 50)"
161+ , children:
162+ [ SVG.animate
163+ { attributeName: "opacity"
164+ , values: "1;0"
165+ , keyTimes: "0;1"
166+ , dur: "1s"
167+ , begin: "-0.1111111111111111s"
168+ , repeatCount: "indefinite"
169+ }
170+ ]
171+ }
172+ , SVG.rect
173+ { x: "48.5"
174+ , y: "38.5"
175+ , rx: "0"
176+ , ry: "0"
177+ , width: "3"
178+ , height: "7"
179+ , fill: "currentColor"
180+ , transform: "rotate(320 50 50)"
181+ , children:
182+ [ SVG.animate
183+ { attributeName: "opacity"
184+ , values: "1;0"
185+ , keyTimes: "0;1"
186+ , dur: "1s"
187+ , begin: "0s"
188+ , repeatCount: "indefinite"
189+ }
190+ ]
191+ }
192+ ]
193+ }