@ryohey/react-svg-spinners
Version:
> A collection of [SVG Spinners](https://github.com/n3r4zzurr0/svg-spinners) components for React.
5 lines (4 loc) • 2.35 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function PulseRingsThree({ width = 24, height = 24, dur = "1.2s", color, }) {
return (_jsxs("svg", { width: width, height: height, fill: color, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z", transform: "translate(12, 12) scale(0)", children: [_jsx("animateTransform", { id: "a", begin: "0;c.begin+0.4s", attributeName: "transform", calcMode: "spline", type: "translate", dur: dur, values: "12 12;0 0", keySplines: ".52,.6,.25,.99" }), _jsx("animateTransform", { begin: "0;c.begin+0.4s", attributeName: "transform", calcMode: "spline", additive: "sum", type: "scale", dur: dur, values: "0;1", keySplines: ".52,.6,.25,.99" }), _jsx("animate", { begin: "0;c.begin+0.4s", attributeName: "opacity", calcMode: "spline", dur: dur, values: "1;0", keySplines: ".52,.6,.25,.99" })] }), _jsxs("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z", transform: "translate(12, 12) scale(0)", children: [_jsx("animateTransform", { id: "b", begin: "a.begin+0.4s", attributeName: "transform", calcMode: "spline", type: "translate", dur: dur, values: "12 12;0 0", keySplines: ".52,.6,.25,.99" }), _jsx("animateTransform", { begin: "a.begin+0.4s", attributeName: "transform", calcMode: "spline", additive: "sum", type: "scale", dur: dur, values: "0;1", keySplines: ".52,.6,.25,.99" }), _jsx("animate", { begin: "a.begin+0.4s", attributeName: "opacity", calcMode: "spline", dur: dur, values: "1;0", keySplines: ".52,.6,.25,.99" })] }), _jsxs("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z", transform: "translate(12, 12) scale(0)", children: [_jsx("animateTransform", { id: "c", begin: "a.begin+0.8s", attributeName: "transform", calcMode: "spline", type: "translate", dur: dur, values: "12 12;0 0", keySplines: ".52,.6,.25,.99" }), _jsx("animateTransform", { begin: "a.begin+0.8s", attributeName: "transform", calcMode: "spline", additive: "sum", type: "scale", dur: dur, values: "0;1", keySplines: ".52,.6,.25,.99" }), _jsx("animate", { begin: "a.begin+0.8s", attributeName: "opacity", calcMode: "spline", dur: dur, values: "1;0", keySplines: ".52,.6,.25,.99" })] })] }));
}