spinners-react
Version:
Lightweight SVG/CSS spinners for React
24 lines (19 loc) • 1.73 kB
JavaScript
'use strict';
var withSharedProps = require('./withSharedProps-EQOgeSQG.js');
var React = require('react');
var styleInject_es = require('./style-inject.es-GkBwmmgD.js');
var css_248z = "@keyframes spinners-react-circular{0%{stroke-dashoffset:306}50%{stroke-dasharray:40,134}to{stroke-dasharray:1,174;stroke-dashoffset:132}}";
styleInject_es.styleInject(css_248z);
function Component(_a) {
var _b = _a.secondaryColor, secondaryColor = _b === void 0 ? styleInject_es.secondaryColorDefaultProps.secondaryColor : _b, _c = _a.speed, speed = _c === void 0 ? styleInject_es.secondaryColorDefaultProps.speed : _c, _d = _a.still, still = _d === void 0 ? styleInject_es.secondaryColorDefaultProps.still : _d, _e = _a.thickness, thickness = _e === void 0 ? styleInject_es.secondaryColorDefaultProps.thickness : _e, svgProps = withSharedProps.__rest(_a, ["secondaryColor", "speed", "still", "thickness"]);
var strokeWidth = 4 * (thickness / 100);
var circleStyle = !still
? { animation: "spinners-react-circular ".concat(140 / speed, "s linear infinite") }
: {};
return (React.createElement("svg", withSharedProps.__assign({ fill: "none" }, svgProps, { viewBox: "0 0 66 66" }),
React.createElement("circle", { cx: "33", cy: "33", fill: "none", r: "28", stroke: secondaryColor, strokeWidth: strokeWidth }),
React.createElement("circle", { cx: "33", cy: "33", fill: "none", r: "28", stroke: "currentColor", strokeDasharray: "1, 174", strokeDashoffset: "306", strokeLinecap: "round", strokeWidth: strokeWidth, style: circleStyle })));
}
var SpinnerCircular = withSharedProps.withSharedProps(Component);
exports.SpinnerCircular = SpinnerCircular;
//# sourceMappingURL=SpinnerCircular.js.map