/**

 * Copyright (c) Meta Platforms, Inc. and affiliates.

 *

 * This source code is licensed under the MIT license found in the

 * LICENSE file in the root directory of this source tree.

 *

 * @flow

 */

import * as React from 'react';

import styles from './LoadingAnimation.css';

type Props = {

  className?: string,

};

export default function LoadingAnimation({className = ''}: Props): React.Node {

  return (

    <svg

      xmlns="http://www.w3.org/2000/svg"

      className={`${styles.Icon} ${className}`}

      width="24"

      height="24"

      viewBox="0 0 100 100">

      <path d="M0 0h100v100H0z" fill="none" />

      <circle fill="currentColor" stroke="none" cx="20" cy="50" r="10">

        <animate

          attributeName="opacity"

          dur="1s"

          values="0;1;0"

          repeatCount="indefinite"

          begin="0.1"

        />

      </circle>

      <circle fill="currentColor" stroke="none" cx="50" cy="50" r="10">

        <animate

          attributeName="opacity"

          dur="1s"

          values="0;1;0"

          repeatCount="indefinite"

          begin="0.2"

        />

      </circle>

      <circle fill="currentColor" stroke="none" cx="80" cy="50" r="10">

        <animate

          attributeName="opacity"

          dur="1s"

          values="0;1;0"

          repeatCount="indefinite"

          begin="0.3"

        />

      </circle>

    </svg>

  );

}