@kubit-ui-web/react-components/dist/cjs/designSystem/kubit/assets/animations/loaders.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.buildForButtonLoader = exports.buildPrimaryLoader = void 0;
const styled_components_1 = require("styled-components");
const sizes_1 = require("../../foundations/sizes");
const rotate = (0, styled_components_1.keyframes) `
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;
const ghost = (0, styled_components_1.keyframes) `
  50% {
    background-color: transparent;
  }
`;
const buildPrimaryLoader = (primaryColor, secondaryColor) => (0, styled_components_1.css) `
  border: ${sizes_1.SIZES.size_25} solid ${primaryColor};
  border-bottom-color: ${secondaryColor};
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: ${rotate} 1s linear infinite;
`;
exports.buildPrimaryLoader = buildPrimaryLoader;
const buildForButtonLoader = (color) => (0, styled_components_1.css) `
  width: 0.5rem;
  height: 0.5rem;
  display: flex;
  border-radius: 100%;
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: ${color};
  animation-name: ${ghost};
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0.4s;

  &::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 100%;
    background-color: ${color};
    position: absolute;
    margin-left: -1rem;
    animation-name: ${ghost};
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }

  &::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 100%;
    background-color: ${color};
    position: absolute;
    margin-left: 1rem;
    animation-name: ${ghost};
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-delay: 0.8s;
  }
`;
exports.buildForButtonLoader = buildForButtonLoader;
//# sourceMappingURL=loaders.js.map