40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import React from "react";
|
|
|
|
const LoadingSpinner: React.FC<React.HTMLAttributes<HTMLDivElement>> = (props) => (
|
|
<div {...props}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
|
<g stroke="currentColor" strokeWidth="1">
|
|
<circle cx="12" cy="12" r="9.5" fill="none" strokeLinecap="round" strokeWidth="3">
|
|
<animate
|
|
attributeName="stroke-dasharray"
|
|
calcMode="spline"
|
|
dur="1.5s"
|
|
keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1"
|
|
keyTimes="0;0.475;0.95;1"
|
|
repeatCount="indefinite"
|
|
values="0 150;42 150;42 150;42 150"
|
|
/>
|
|
<animate
|
|
attributeName="stroke-dashoffset"
|
|
calcMode="spline"
|
|
dur="1.5s"
|
|
keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1"
|
|
keyTimes="0;0.475;0.95;1"
|
|
repeatCount="indefinite"
|
|
values="0;-16;-59;-59"
|
|
/>
|
|
</circle>
|
|
<animateTransform
|
|
attributeName="transform"
|
|
dur="2s"
|
|
repeatCount="indefinite"
|
|
type="rotate"
|
|
values="0 12 12;360 12 12"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
);
|
|
|
|
export default LoadingSpinner;
|