loading animation which can be displayed while data is fetched from an api

Author: StackOverflowIsBetterThanAnyAI

.gitignore

@@ -0,0 +1 @@
+/node_modules

README.md

@@ -0,0 +1,3 @@
+# Fetch Loading
+
+Loading animation which can be displayed while data is fetched from an API.

package-lock.json

@@ -0,0 +1,29 @@
+{
+    "name": "fetch-loading",
+    "version": "1.0.0",
+    "description": "Loading animation which can be displayed while data is fetched from an API",
+    "main": "src/index.ts",
+    "files": [
+        "src/*"
+    ],
+    "keywords": [
+        "loading",
+        "animation",
+        "fetch",
+        "api",
+        "spinner",
+        "react",
+        "typescript"
+    ],
+    "prettier": "prettier-es5",
+    "author": "Michael Münzenhofer",
+    "license": "MIT",
+    "devDependencies": {
+        "@tsconfig/recommended": "^1.0.8",
+        "@types/react": "^19.0.8"
+    },
+    "dependencies": {
+        "react": "^19.0.0",
+        "typescript": "^5.7.3"
+    }
+}

package.json

@@ -0,0 +1,39 @@
+import { FC } from 'react'
+import './index.css'
+
+type FetchLoadingProps = {
+    theme?: string
+}
+type DotProps = {
+    delay?: number
+}
+
+const isValidHex = (color: string): boolean =>
+    /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(color)
+
+const Dot: FC<DotProps & FetchLoadingProps> = ({ delay = 0, theme }) => {
+    const background = theme && isValidHex(theme) ? theme : '#52525c'
+    return (
+        <div
+            style={{
+                animation: 'fetch-loading 2s ease-in-out infinite',
+                animationDelay: `${delay}s`,
+                height: '12px',
+                width: '12px',
+                backgroundColor: background,
+            }}
+        ></div>
+    )
+}
+
+export const FetchLoading: FC<FetchLoadingProps> = ({ theme }) => {
+    return (
+        <>
+            <div style={{ display: 'flex', gap: '8px', padding: '6px 2px' }}>
+                <Dot delay={0} theme={theme} />
+                <Dot delay={-1.33} theme={theme} />
+                <Dot delay={-0.67} theme={theme} />
+            </div>
+        </>
+    )
+}

src/FetchLoading.tsx

@@ -0,0 +1,26 @@
+@keyframes fetch-loading {
+    0% {
+        opacity: 0;
+        scale: 0.5;
+        border-radius: 0%;
+        transform: translate(0px);
+    }
+    33% {
+        opacity: 1;
+        scale: 1;
+        border-radius: 80%;
+        transform: translate(0px, -6px);
+    }
+    60% {
+        opacity: 1;
+        scale: 1;
+        border-radius: 80% 80% 60% 60%;
+        transform: translate(0px, 4px);
+    }
+    100% {
+        opacity: 0;
+        scale: 0.5;
+        border-radius: 0%;
+        transform: translate(0px, -2px);
+    }
+}

src/index.css

@@ -0,0 +1 @@
+export * from './FetchLoading'

src/index.ts

@@ -0,0 +1,6 @@
+{
+    "extends": "@tsconfig/recommended/tsconfig.json",
+    "compilerOptions": {
+        "jsx": "preserve"
+    }
+}