@smart-react-components/ui/components/Loading/LoadingElement.js

SRC UI includes React and Styled components.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Circle_1 = __importDefault(require("@smart-react-components/core/Element/Circle"));
const Svg_1 = __importDefault(require("@smart-react-components/core/Element/Svg"));
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
exports.default = (0, styled_components_1.default)(Svg_1.default).attrs(({ loadingColor }) => ({
    children: react_1.default.createElement(Circle_1.default, { cx: "22", cy: "22", r: "20", stroke: loadingColor, strokeWidth: 4 }),
    getLoadingSize: (v, t) => `
    height: ${t.$.size.loading[v]};
    width: ${t.$.size.loading[v]};
  `,
    viewBox: '0 0 44 44',
})) `
  animation: src-loading-animation 2000ms linear infinite;

  circle {
    animation: src-loading-circle-animation 2000ms linear infinite;
    fill: none;
    stroke-dasharray: 1,150;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }

  @keyframes src-loading-animation {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  @keyframes src-loading-circle-animation {
    0% {
      stroke-dasharray: 1,150;
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dasharray: 90,150;
      stroke-dashoffset: -35;
    }

    100% {
      stroke-dasharray: 90,150;
      stroke-dashoffset: -124;
    }
  }
`;