import styled, { keyframes } from 'styled-components';

import type { IconProps } from '@redocly/theme/icons/types';

import { CircleDashIcon } from '@redocly/theme/icons/CircleDashIcon/CircleDashIcon';

const rotate = keyframes`
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg);
  }
`;

export const Spinner = styled(CircleDashIcon).attrs(() => ({
  'data-component-name': 'icons/Spinner/Spinner',
}))<IconProps>`
  animation: 2s ${rotate} linear infinite;
`;