@ryohey/react-svg-spinners
Version:
> A collection of [SVG Spinners](https://github.com/n3r4zzurr0/svg-spinners) components for React.
5 lines (4 loc) • 1.3 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function BarsRotateFade({ width = 24, height = 24, dur = "0.75s", color, }) {
return (_jsx("svg", { width: width, height: height, fill: color, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { children: [_jsx("rect", { x: "11", y: "1", width: "2", height: "5", opacity: ".14" }), _jsx("rect", { x: "11", y: "1", width: "2", height: "5", transform: "rotate(30 12 12)", opacity: ".29" }), _jsx("rect", { x: "11", y: "1", width: "2", height: "5", transform: "rotate(60 12 12)", opacity: ".43" }), _jsx("rect", { x: "11", y: "1", width: "2", height: "5", transform: "rotate(90 12 12)", opacity: ".57" }), _jsx("rect", { x: "11", y: "1", width: "2", height: "5", transform: "rotate(120 12 12)", opacity: ".71" }), _jsx("rect", { x: "11", y: "1", width: "2", height: "5", transform: "rotate(150 12 12)", opacity: ".86" }), _jsx("rect", { x: "11", y: "1", width: "2", height: "5", transform: "rotate(180 12 12)" }), _jsx("animateTransform", { attributeName: "transform", type: "rotate", calcMode: "discrete", dur: dur, values: "0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12", repeatCount: "indefinite" })] }) }));
}