UNPKG

spinners-react

Version:

Lightweight SVG/CSS spinners for React

37 lines (33 loc) 1.78 kB
import { w as withSharedProps, _ as __rest, a as __assign } from './withSharedProps-KvHSGnzu.js'; import React from 'react'; import { s as styleInject, d as defaultProps } from './style-inject.es-CuJ1gXUq.js'; var css_248z = "@keyframes spinners-react-round-filled-outer{40%,60%{transform:scale(0)}}@keyframes spinners-react-round-filled-center{30%,70%{transform:scale(0)}}@keyframes spinners-react-round-filled-inner{20%,80%{transform:scale(0)}}"; styleInject(css_248z); var animations = [ { r: 4 }, { name: 'spinners-react-round-filled-inner', r: 12.66, }, { name: 'spinners-react-round-filled-center', r: 20.32, }, { name: 'spinners-react-round-filled-outer', r: 27.5, }, ]; function Component(_a) { var _b = _a.speed, speed = _b === void 0 ? defaultProps.speed : _b, _c = _a.still, still = _c === void 0 ? defaultProps.still : _c, _d = _a.thickness, thickness = _d === void 0 ? defaultProps.thickness : _d, svgProps = __rest(_a, ["speed", "still", "thickness"]); return (React.createElement("svg", __assign({ fill: "none" }, svgProps, { viewBox: "0 0 66 66" }), animations.map(function (animation) { return (React.createElement("circle", { key: animation.name || 'still', cx: "33", cy: "33", fill: "currentColor", r: animation.r * (animation.name ? (thickness / 100) : 1), style: { opacity: animation.name ? 0.25 : 1, transformOrigin: 'center', animation: (!animation.name || still) ? 'none' : "".concat(animation.name, " ").concat(140 / speed, "s ease-in-out infinite"), } })); }))); } var SpinnerRoundFilled = withSharedProps(Component); export { SpinnerRoundFilled }; //# sourceMappingURL=SpinnerRoundFilled.js.map