spinners-react/lib/cjs/SpinnerDiamond.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-diamond{25%{transform:translate(30px,-30px)}50%{transform:translate(60px)}75%{transform:translate(30px,30px)}}";
styleInject_es.styleInject(css_248z);

var coords = [
    { x: 3, y: 48 },
    { x: 18, y: 33 },
    { x: 18, y: 48 },
    { x: 18, y: 63 },
    { x: 33, y: 48 },
    // -------------
    { x: 33, y: 18 },
    { x: 33, y: 33 },
    { x: 33, y: 63 },
    { x: 33, y: 78 },
    { x: 48, y: 3 },
    { x: 48, y: 18 },
    { x: 48, y: 33 },
    { x: 48, y: 48 },
    { x: 48, y: 63 },
    { x: 48, y: 78 },
    { x: 48, y: 93 },
    { x: 63, y: 18 },
    { x: 63, y: 33 },
    { x: 63, y: 48 },
    { x: 63, y: 63 },
    { x: 63, y: 78 },
    { x: 78, y: 33 },
    { x: 78, y: 48 },
    { x: 78, y: 63 },
    { x: 93, y: 48 },
];
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 diamondStyle = {
        animation: "spinners-react-diamond ".concat(140 / speed, "s steps(2, end) infinite"),
    };
    if (still)
        diamondStyle.animation = 'none';
    return (React.createElement("svg", withSharedProps.__assign({ fill: "currentColor" }, svgProps, { viewBox: "0 0 96 96" }),
        coords.map(function (c) { return (React.createElement("circle", { key: "".concat(c.x, "-").concat(c.y), cx: c.x, cy: c.y, fill: secondaryColor, r: 2.5 * (thickness / 100) })); }),
        React.createElement("g", { style: diamondStyle }, coords.filter(function (c, i) { return i < 5; }).map(function (c) { return (React.createElement("circle", { key: "h-".concat(c.x, "-").concat(c.y), cx: c.x, cy: c.y, r: 3.5 * (thickness / 100) })); }))));
}
var SpinnerRomb = withSharedProps.withSharedProps(Component);
var SpinnerDiamond = withSharedProps.withSharedProps(Component);

exports.SpinnerDiamond = SpinnerDiamond;
exports.SpinnerRomb = SpinnerRomb;
//# sourceMappingURL=SpinnerDiamond.js.map