Files
jellyseerr/src/components/Common/LoadingSpinner/index.tsx
Ryan Cohen 16545eec22 feat: tooltip foundation (#2950)
* feat: add foundation for tooltips

* fix: add lang

* refactor: remove React import where no longer necessary
2022-08-19 19:35:50 +09:00

60 lines
1.7 KiB
TypeScript

export const SmallLoadingSpinner = () => {
return (
<div className="inset-0 flex h-full w-full items-center justify-center text-gray-200">
<svg
className="h-10 w-10"
viewBox="0 0 38 38"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
>
<g fill="none" fillRule="evenodd">
<g transform="translate(1 1)" strokeWidth="2">
<circle strokeOpacity=".5" cx="18" cy="18" r="18" />
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"
/>
</path>
</g>
</g>
</svg>
</div>
);
};
const LoadingSpinner = () => {
return (
<div className="inset-0 flex h-64 items-center justify-center text-gray-200">
<svg
className="h-16 w-16"
viewBox="0 0 38 38"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
>
<g fill="none" fillRule="evenodd">
<g transform="translate(1 1)" strokeWidth="2">
<circle strokeOpacity=".5" cx="18" cy="18" r="18" />
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"
/>
</path>
</g>
</g>
</svg>
</div>
);
};
export default LoadingSpinner;