@spark-web/spinner/dist/spark-web-spinner.esm.js

--- title: Spinner storybookPath: feedback-overlays-spinner--default isExperimentalPackage: true ---

import { keyframes, css } from '@emotion/react';
import { VisuallyHidden } from '@spark-web/a11y';
import { Box } from '@spark-web/box';
import { createIcon } from '@spark-web/icon';
import { useSynchronizedAnimation } from '@spark-web/utils';
import { jsx, jsxs } from '@emotion/react/jsx-runtime';

function Spinner(_ref) {
  var tone = _ref.tone,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'xxsmall' : _ref$size,
    data = _ref.data;
  var spinAnimationRef = useSynchronizedAnimation(spinAnimation);
  var strokeAnimationRef = useSynchronizedAnimation(strokeDashAnimation);
  var styles = useSpinnerStyles();
  return jsxs(Box, {
    as: "span",
    ref: spinAnimationRef,
    css: css(styles),
    height: size,
    width: size,
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    data: data,
    children: [jsx(VisuallyHidden, {
      children: "is loading"
    }), jsx(SpinnerIcon, {
      size: size,
      tone: tone,
      ref: strokeAnimationRef,
      "aria-hidden": "true"
    })]
  });
}
Spinner.displayName = 'Spinner';
var SpinnerIcon = createIcon(jsx("circle", {
  cx: 12,
  cy: 12,
  r: 9
}), 'SpinnerIcon');
var spinAnimation = keyframes({
  from: {
    transform: 'rotate(0deg)'
  },
  to: {
    transform: 'rotate(360deg)'
  }
});
var strokeDashAnimation = keyframes({
  '0%': {
    strokeDasharray: '1px, 200px',
    strokeDashoffset: 0
  },
  '100%': {
    strokeDasharray: '200px, 200px',
    strokeDashoffset: '-55px'
  }
});
function useSpinnerStyles() {
  return {
    animation: "".concat(spinAnimation, " 1.4s linear infinite"),
    '& circle': {
      animation: "".concat(strokeDashAnimation, " 1.6s cubic-bezier(0.47, 0, 0.75, 0.72) infinite")
    }
  };
}

export { Spinner };