rowtype-yoga/ry-blocks
1
0
Fork 0
mirror of https://github.com/rowtype-yoga/ry-blocks.git synced 2024-09-11 21:38:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add Spinner

Browse Source
This commit is contained in:
Mark Eibes 2022-06-28 19:57:07 +02:00
parent 49ca378f51
commit 45764932ff
1 changed files with 186 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

375
src/Yoga/Block/Icon/SVG/Spinner.purs
View File

@ -4,193 +4,190 @@ import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.DOM.SVG as SVG
spinner :: JSX
spinner ∷ JSX
spinner = SVG.svg
{ xmlns: "http://www.w3.org/2000/svg"
, style: R.css { margin: "auto", background: "#f1f2f3", display: "block" }
, width: "91"
, height: "91"
, viewBox: "0 0 100 100"
, preserveAspectRatio: "xMidYMid"
, children:
[ SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.8888888888888888s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, transform: "rotate(40 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.7777777777777778s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, transform: "rotate(80 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.6666666666666666s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, transform: "rotate(120 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.5555555555555556s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, transform: "rotate(160 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.4444444444444444s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, transform: "rotate(200 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.3333333333333333s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, transform: "rotate(240 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.2222222222222222s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, transform: "rotate(280 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.1111111111111111s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "#0a0a0a"
, transform: "rotate(320 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "0s"
, repeatCount: "indefinite"
}
]
}
]
}
{ xmlns: "http://www.w3.org/2000/svg"
, viewBox: "38 38 24 24"
, preserveAspectRatio: "xMidYMid"
, children:
[ SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "currentColor"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.8888888888888888s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "currentColor"
, transform: "rotate(40 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.7777777777777778s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "currentColor"
, transform: "rotate(80 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.6666666666666666s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "currentColor"
, transform: "rotate(120 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.5555555555555556s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "currentColor"
, transform: "rotate(160 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.4444444444444444s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "currentColor"
, transform: "rotate(200 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.3333333333333333s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "currentColor"
, transform: "rotate(240 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.2222222222222222s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "currentColor"
, transform: "rotate(280 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "-0.1111111111111111s"
, repeatCount: "indefinite"
}
]
}
, SVG.rect
{ x: "48.5"
, y: "38.5"
, rx: "0"
, ry: "0"
, width: "3"
, height: "7"
, fill: "currentColor"
, transform: "rotate(320 50 50)"
, children:
[ SVG.animate
{ attributeName: "opacity"
, values: "1;0"
, keyTimes: "0;1"
, dur: "1s"
, begin: "0s"
, repeatCount: "indefinite"
}
]
}
]
}