UNPKG

@ryohey/react-svg-spinners

Version:

> A collection of [SVG Spinners](https://github.com/n3r4zzurr0/svg-spinners) components for React.

5 lines (4 loc) 4.71 kB
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; export default function BlocksWave({ width = 24, height = 24, dur = "0.6s", color, }) { return (_jsxs("svg", { width: width, height: height, fill: color, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("rect", { x: "1", y: "1", width: "7.33", height: "7.33", children: [_jsx("animate", { id: "a", begin: "0;b.end+0.2s", attributeName: "x", dur: dur, values: "1;4;1" }), _jsx("animate", { begin: "0;b.end+0.2s", attributeName: "y", dur: dur, values: "1;4;1" }), _jsx("animate", { begin: "0;b.end+0.2s", attributeName: "width", dur: dur, values: "7.33;1.33;7.33" }), _jsx("animate", { begin: "0;b.end+0.2s", attributeName: "height", dur: dur, values: "7.33;1.33;7.33" })] }), _jsxs("rect", { x: "8.33", y: "1", width: "7.33", height: "7.33", children: [_jsx("animate", { begin: "a.begin+0.1s", attributeName: "x", dur: dur, values: "8.33;11.33;8.33" }), _jsx("animate", { begin: "a.begin+0.1s", attributeName: "y", dur: dur, values: "1;4;1" }), _jsx("animate", { begin: "a.begin+0.1s", attributeName: "width", dur: dur, values: "7.33;1.33;7.33" }), _jsx("animate", { begin: "a.begin+0.1s", attributeName: "height", dur: dur, values: "7.33;1.33;7.33" })] }), _jsxs("rect", { x: "1", y: "8.33", width: "7.33", height: "7.33", children: [_jsx("animate", { begin: "a.begin+0.1s", attributeName: "x", dur: dur, values: "1;4;1" }), _jsx("animate", { begin: "a.begin+0.1s", attributeName: "y", dur: dur, values: "8.33;11.33;8.33" }), _jsx("animate", { begin: "a.begin+0.1s", attributeName: "width", dur: dur, values: "7.33;1.33;7.33" }), _jsx("animate", { begin: "a.begin+0.1s", attributeName: "height", dur: dur, values: "7.33;1.33;7.33" })] }), _jsxs("rect", { x: "15.66", y: "1", width: "7.33", height: "7.33", children: [_jsx("animate", { begin: "a.begin+0.2s", attributeName: "x", dur: dur, values: "15.66;18.66;15.66" }), _jsx("animate", { begin: "a.begin+0.2s", attributeName: "y", dur: dur, values: "1;4;1" }), _jsx("animate", { begin: "a.begin+0.2s", attributeName: "width", dur: dur, values: "7.33;1.33;7.33" }), _jsx("animate", { begin: "a.begin+0.2s", attributeName: "height", dur: dur, values: "7.33;1.33;7.33" })] }), _jsxs("rect", { x: "8.33", y: "8.33", width: "7.33", height: "7.33", children: [_jsx("animate", { begin: "a.begin+0.2s", attributeName: "x", dur: dur, values: "8.33;11.33;8.33" }), _jsx("animate", { begin: "a.begin+0.2s", attributeName: "y", dur: dur, values: "8.33;11.33;8.33" }), _jsx("animate", { begin: "a.begin+0.2s", attributeName: "width", dur: dur, values: "7.33;1.33;7.33" }), _jsx("animate", { begin: "a.begin+0.2s", attributeName: "height", dur: dur, values: "7.33;1.33;7.33" })] }), _jsxs("rect", { x: "1", y: "15.66", width: "7.33", height: "7.33", children: [_jsx("animate", { begin: "a.begin+0.2s", attributeName: "x", dur: dur, values: "1;4;1" }), _jsx("animate", { begin: "a.begin+0.2s", attributeName: "y", dur: dur, values: "15.66;18.66;15.66" }), _jsx("animate", { begin: "a.begin+0.2s", attributeName: "width", dur: dur, values: "7.33;1.33;7.33" }), _jsx("animate", { begin: "a.begin+0.2s", attributeName: "height", dur: dur, values: "7.33;1.33;7.33" })] }), _jsxs("rect", { x: "15.66", y: "8.33", width: "7.33", height: "7.33", children: [_jsx("animate", { begin: "a.begin+0.3s", attributeName: "x", dur: dur, values: "15.66;18.66;15.66" }), _jsx("animate", { begin: "a.begin+0.3s", attributeName: "y", dur: dur, values: "8.33;11.33;8.33" }), _jsx("animate", { begin: "a.begin+0.3s", attributeName: "width", dur: dur, values: "7.33;1.33;7.33" }), _jsx("animate", { begin: "a.begin+0.3s", attributeName: "height", dur: dur, values: "7.33;1.33;7.33" })] }), _jsxs("rect", { x: "8.33", y: "15.66", width: "7.33", height: "7.33", children: [_jsx("animate", { begin: "a.begin+0.3s", attributeName: "x", dur: dur, values: "8.33;11.33;8.33" }), _jsx("animate", { begin: "a.begin+0.3s", attributeName: "y", dur: dur, values: "15.66;18.66;15.66" }), _jsx("animate", { begin: "a.begin+0.3s", attributeName: "width", dur: dur, values: "7.33;1.33;7.33" }), _jsx("animate", { begin: "a.begin+0.3s", attributeName: "height", dur: dur, values: "7.33;1.33;7.33" })] }), _jsxs("rect", { x: "15.66", y: "15.66", width: "7.33", height: "7.33", children: [_jsx("animate", { id: "b", begin: "a.begin+0.4s", attributeName: "x", dur: dur, values: "15.66;18.66;15.66" }), _jsx("animate", { begin: "a.begin+0.4s", attributeName: "y", dur: dur, values: "15.66;18.66;15.66" }), _jsx("animate", { begin: "a.begin+0.4s", attributeName: "width", dur: dur, values: "7.33;1.33;7.33" }), _jsx("animate", { begin: "a.begin+0.4s", attributeName: "height", dur: dur, values: "7.33;1.33;7.33" })] })] })); }