spinners-react/lib/cjs/SpinnerRoundFilled.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-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_es.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 ? 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"]);
    return (React.createElement("svg", withSharedProps.__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.withSharedProps(Component);

exports.SpinnerRoundFilled = SpinnerRoundFilled;
//# sourceMappingURL=SpinnerRoundFilled.js.map