spinners-react/lib/cjs/SpinnerDotted.js

Lightweight SVG/CSS spinners for React

'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-dotted-center{0%,15%,85%,to{transform:scale(0)}40%,50%{transform:scale(1)}84%{transform:scale(.45)}}@keyframes spinners-react-dotted-shrink{50%{transform:translate(0)}}";
styleInject_es.styleInject(css_248z);

var coords = [
    { x: 22, y: -20 },
    { x: 29, y: 0 },
    { x: 22, y: 20 },
    { x: 0, y: 30 },
    { x: -23, y: 20 },
    { x: -30, y: 0 },
    { x: -23, y: -20 },
    { x: 0, y: -30 },
];
function Component(_a) {
    var _b = _a.speed, speed = _b === void 0 ? styleInject_es.defaultProps.speed : _b, _c = _a.still, still = _c === void 0 ? styleInject_es.defaultProps.still : _c, _d = _a.thickness, thickness = _d === void 0 ? styleInject_es.defaultProps.thickness : _d, svgProps = withSharedProps.__rest(_a, ["speed", "still", "thickness"]);
    var duration = 200 / speed;
    var generateCircleStyle = function (i) { return (!still
        ? { animation: "spinners-react-dotted-shrink ".concat(duration, "s cubic-bezier(0, 0.9, 0, 0.9) ").concat((duration / 20) * i, "s infinite") }
        : {}); };
    var centerStyle = !still
        ? {
            animation: "spinners-react-dotted-center ".concat(duration, "s ease-out infinite"),
            transformOrigin: 'center',
        }
        : { display: 'none' };
    return (React.createElement("svg", withSharedProps.__assign({ fill: "none", viewBox: "0 0 66 66" }, svgProps),
        coords.map(function (c, i) { return (React.createElement("circle", { key: "".concat(c.x, "-").concat(c.y), cx: "33", cy: "33", fill: "currentColor", r: 3 * (thickness / 100), style: withSharedProps.__assign({ transform: "translate(".concat(c.x, "px, ").concat(c.y, "px)") }, generateCircleStyle(i)) })); }),
        React.createElement("circle", { cx: "33", cy: "33", fill: "currentColor", r: 6 * (thickness / 100), style: centerStyle })));
}
var SpinnerDotted = withSharedProps.withSharedProps(Component);

exports.Component = Component;
exports.SpinnerDotted = SpinnerDotted;
//# sourceMappingURL=SpinnerDotted.js.map