83 lines
2.2 KiB
JavaScript
83 lines
2.2 KiB
JavaScript
import { path } from 'shared/components/icons/freesewing.js'
|
|
|
|
const Spinner = ({ className = 'h-36 w-36', circle = 1, triangle = 1 }) => {
|
|
const tw = 85
|
|
const th = tw * (1 - Math.cos(30))
|
|
return (
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-20 -28 95 95" className={className}>
|
|
<path d={path} fill="currentColor" transform="scale(2) translate(-1 0)" />
|
|
{triangle && (
|
|
<path
|
|
d={`M 27.5 -21 l ${tw / 2} ${th} l ${tw * -1} 0 z`}
|
|
stroke="currentColor"
|
|
stroke-width="1"
|
|
fill="none"
|
|
strokeDasharray={`60 ${tw * 3 - 60}`}
|
|
>
|
|
<animate
|
|
attributeName="stroke-dashoffset"
|
|
attributeType="XML"
|
|
from={tw * -3}
|
|
to="0"
|
|
dur="1.5s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</path>
|
|
)}
|
|
{circle && (
|
|
<circle
|
|
cx="24"
|
|
cy="24"
|
|
r="32"
|
|
strokeWidth="1"
|
|
stroke="currentColor"
|
|
strokeDasharray="60 360"
|
|
fill="none"
|
|
>
|
|
<animateTransform
|
|
attributeName="transform"
|
|
attributeType="XML"
|
|
type="rotate"
|
|
from="0 24 24"
|
|
to="360 24 24"
|
|
dur="1.2s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</circle>
|
|
)}
|
|
<rect height="1" width="6" x="15.5" y="17" className="blink" fill="currentColor">
|
|
<animate
|
|
attributeType="XML"
|
|
attributeName="height"
|
|
from="1"
|
|
to="7.5"
|
|
begin="loop.begin+1.5s;"
|
|
dur="0.15s"
|
|
/>
|
|
</rect>
|
|
<rect height="1" width="5.8" x="25" y="17" className="blink" fill="currentColor">
|
|
<animate
|
|
attributeType="XML"
|
|
attributeName="height"
|
|
from="1"
|
|
to="7.5"
|
|
begin="loop.begin+1.5s;"
|
|
dur="0.15s"
|
|
/>
|
|
</rect>
|
|
<rect height="1" width="1" x="-10" y="-10" fill="none">
|
|
<animate
|
|
attributeType="CSS"
|
|
attributeName="visibility"
|
|
from="hide"
|
|
to="hide"
|
|
begin="0;loop.end"
|
|
dur="3s"
|
|
id="loop"
|
|
/>
|
|
</rect>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export default Spinner
|