@grafana/ui/dist/cjs/components/AutoSaveField/EllipsisAnimated.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var ThemeContext = require('../../themes/ThemeContext.cjs');

"use strict";
const EllipsisAnimated = React.memo(() => {
  const styles = ThemeContext.useStyles2(getStyles);
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ellipsis, children: [
    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.firstDot, children: "." }),
    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.secondDot, children: "." }),
    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.thirdDot, children: "." })
  ] });
});
EllipsisAnimated.displayName = "EllipsisAnimated";
const getStyles = (theme) => {
  return {
    ellipsis: css.css({
      display: "inline"
    }),
    firstDot: css.css({
      [theme.transitions.handleMotion("no-preference", "reduce")]: {
        animation: `${firstDot} 2s linear infinite`
      }
    }),
    secondDot: css.css({
      [theme.transitions.handleMotion("no-preference", "reduce")]: {
        animation: `${secondDot} 2s linear infinite`
      }
    }),
    thirdDot: css.css({
      [theme.transitions.handleMotion("no-preference", "reduce")]: {
        animation: `${thirdDot} 2s linear infinite`
      }
    })
  };
};
const firstDot = css.keyframes`
  0% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  66% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
  `;
const secondDot = css.keyframes`
  0% {
    opacity: 0;
  }
  21% {
    opacity: 0.5;
  }
  22% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  66% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
  `;
const thirdDot = css.keyframes`
  0% {
    opacity: 0;
  }
  43% {
    opacity: 0.5;
  }
  44% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  66% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
  `;

exports.EllipsisAnimated = EllipsisAnimated;
//# sourceMappingURL=EllipsisAnimated.cjs.map