hourglass-inaipi-loader/dist/index.esm.js

A stylish hourglass loader for React.

import React from 'react';
import PropTypes from 'prop-types';

function styleInject(css, ref) {
  if (ref === void 0) ref = {};
  var insertAt = ref.insertAt;
  if (typeof document === 'undefined') {
    return;
  }
  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';
  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }
  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = "\r\n.loader {\r\n    --c1: #2268A0;\r\n    --c2: #72A1ED;\r\n    width: 40px;\r\n    height: 80px;\r\n    border-top: 3px solid var(--c1);\r\n    border-bottom: 3px solid var(--c1);\r\n    background: linear-gradient(90deg, var(--c1) 2px, var(--c2) 0 5px,var(--c1) 0) 50%/7px 8px no-repeat;\r\n    display: grid;\r\n    overflow: hidden;\r\n    animation: l5-0 2s infinite linear;\r\n  }\r\n  \r\n  .loader::before,\r\n  .loader::after {\r\n    content: \"\";\r\n    grid-area: 1/1;\r\n    width: 75%;\r\n    height: calc(50% - 4px);\r\n    margin: 0 auto;\r\n    border: 2px solid var(--c1);\r\n    border-top: 0;\r\n    box-sizing: content-box;\r\n    border-radius: 0 0 50% 50%;\r\n    -webkit-mask: linear-gradient(#000 0 0) bottom/4px 2px no-repeat,\r\n      linear-gradient(#000 0 0);\r\n    -webkit-mask-composite: destination-out;\r\n    mask-composite: exclude;\r\n    background: linear-gradient(var(--d,0deg),var(--c2) 50%,#0000 0) bottom /100% 205%,\r\n      linear-gradient(var(--c2) 0 0) center/0 100%;\r\n    background-repeat: no-repeat;\r\n    animation: inherit;\r\n    animation-name: l5-1;\r\n  }\r\n  \r\n  .loader::after {\r\n    transform-origin: 50% calc(100% + 2px);\r\n    transform: scaleY(-1);\r\n    --s: 3px;\r\n    --d: 180deg;\r\n  }\r\n  \r\n  @keyframes l5-0 {\r\n    80% {\r\n      transform: rotate(0)\r\n    }\r\n  \r\n    100% {\r\n      transform: rotate(0.5turn)\r\n    }\r\n  }\r\n  \r\n  @keyframes l5-1 {\r\n    10%,70% {\r\n      background-size: 100% 205%,var(--s,0) 100%\r\n    }\r\n  \r\n    70%,100% {\r\n      background-position: top,center\r\n    }\r\n  }";
styleInject(css_248z);

const HourglassInaipi = ({
  size = 40
}) => {
  const width = size * 2 / 3; // Maintain 3:2 ratio

  return /*#__PURE__*/React.createElement("div", {
    style: {
      height: `${size}px`,
      width: `${width}px`
    },
    className: "loader"
  });
};
HourglassInaipi.propTypes = {
  size: PropTypes.number,
  color: PropTypes.arrayOf(PropTypes.string) // Define color as an array of strings
};

export { HourglassInaipi as default };