All files / app/components SpinnerImage.tsx

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77                8x 1x 1x                                                                                                                                 8x  
import React from 'react';
 
export interface SpinnerImageProps {
  // Style of the div the SVG is rendered in
  width?: number;
  height?: number;
}
 
export const SpinnerImage = (props: SpinnerImageProps): JSX.Element => {
  const { height = 200, width = 200 } = props;
  return (
    <svg
      height={height}
      width={width}
      version="1.1"
      id="L2"
      xmlns="http://www.w3.org/2000/svg"
      x="0px"
      y="0px"
      viewBox="0 0 100 100"
      enable-background="new 0 0 100 100"
    >
      <circle
        fill="none"
        stroke="#ccc"
        stroke-width="4"
        stroke-miterlimit="10"
        cx="50"
        cy="50"
        r="48"
      />
      <line
        fill="none"
        stroke-linecap="round"
        stroke="#ccc"
        stroke-width="4"
        stroke-miterlimit="10"
        x1="50"
        y1="50"
        x2="85"
        y2="50.5"
      >
        <animateTransform
          attributeName="transform"
          dur="2s"
          type="rotate"
          to="0 50 50"
          from="360 50 50"
          repeatCount="indefinite"
        />
      </line>
      <line
        fill="none"
        stroke-linecap="round"
        stroke="#ccc"
        stroke-width="4"
        stroke-miterlimit="10"
        x1="50"
        y1="50"
        x2="49.5"
        y2="74"
      >
        <animateTransform
          attributeName="transform"
          dur="15s"
          type="rotate"
          to="0 50 50"
          from="360 50 50"
          repeatCount="indefinite"
        />
      </line>
    </svg>
  );
};
 
SpinnerImage.displayName = 'SpinnerImage';