LoadingAnimation() — react Function Reference

Architecture documentation for the LoadingAnimation() function in LoadingAnimation.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ LoadingAnimation() — react Function Reference

Dependency Diagram

graph TD
  69abf117_7807_801a_56b5_5d173c2b9bc7["LoadingAnimation()"]
  cc9092f8_40d3_7bfd_6552_ebe71cb60a00["LoadingAnimation.js"]
  69abf117_7807_801a_56b5_5d173c2b9bc7 -->|defined in| cc9092f8_40d3_7bfd_6552_ebe71cb60a00
  style 69abf117_7807_801a_56b5_5d173c2b9bc7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js lines 17–55

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>
  );
}