UNPKG

spinners-react

Version:

Lightweight SVG/CSS spinners for React

24 lines (19 loc) 2.05 kB
'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-split{0%{stroke-dashoffset:1;stroke-dasharray:5,170}10%{stroke-dashoffset:13;stroke-dasharray:30,145}13%{stroke-dashoffset:-11;stroke-dasharray:5,145}50%{stroke-dasharray:5,0,5,165;stroke-dashoffset:-82}51%{stroke-dasharray:2,0,2,139;stroke-dashoffset:-85}61%{stroke-dasharray:15,0,15,165;stroke-dashoffset:-72}64%{stroke-dasharray:5,20,5,145;stroke-dashoffset:-72}}"; 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-split ".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: "5, 170", strokeDashoffset: "1", strokeLinecap: "round", strokeWidth: strokeWidth, style: circleStyle, transform: "rotate(-90 33 33)" }))); } var SpinnerCircularSplit = withSharedProps.withSharedProps(Component); exports.SpinnerCircularSplit = SpinnerCircularSplit; //# sourceMappingURL=SpinnerCircularSplit.js.map