@wener/ui/lib/src/loaders/BarsSpinner.js

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BarsSpinner = void 0;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
// import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
const BarsSpinnerBox = styled_components_1.default.div `
  position: absolute;
  width: 35px;
  height: 35px;
  left: 50%;
  top: 50%;
  & > div {
    position: absolute;
    width: 2px;
    height: 8px;
    background-color: #25363f;
    opacity: 0.05;
    animation: fadeit 0.8s linear infinite;
  }

  ${({ bars }) => Array(bars)
    .fill(null)
    .map((_, i) => `
  & > div:nth-child(${i + 1}) {
    transform: rotate(${((360 / bars) * i).toFixed(2)}deg) translate(0, -12px);
    animation-delay:${((0.8 / bars) * (i + 1)).toFixed(2)}s;
  }
  `)}

  @keyframes fadeit {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
`;
exports.BarsSpinner = ({ bars = 16 }) => {
    return (react_1.default.createElement(BarsSpinnerBox, { bars: bars }, Array(bars)
        .fill(null)
        .map((_, i) => (react_1.default.createElement("div", { key: i })))));
};
//# sourceMappingURL=BarsSpinner.js.map