docs: Add loading bar pure component

examples/nextjs/components/Formatted.tsx

@@ -1,3 +1,4 @@
+'use client';
 import clsx from "clsx";
 import React from "react";
 

examples/nextjs/components/LoadingBar.module.css

@@ -0,0 +1,18 @@
+.container {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 3px;
+  z-index: 200;
+}
+
+.inner {
+  position: absolute;
+  top: 0;
+  left: -10px;
+  height: 100%;
+  width: 100%;
+  background-color: red;
+  transform-origin: left center;
+  box-shadow: 0px -3px 10px 5px rgba(255, 0, 0, 0.6);
+}

examples/nextjs/components/LoadingBar.tsx

@@ -0,0 +1,66 @@
+'use client';
+import { useRef, useEffect } from 'react';
+import styles from './LoadingBar.module.css';
+
+const LoadingBar = ({
+  duration,
+  loading,
+}: {
+  duration?: number;
+  loading?: boolean;
+}) => {
+  const barRef = useRef<HTMLDivElement>(null);
+  const delay = 50;
+
+  useEffect(() => {
+    if (!loading) return;
+    const node = barRef.current;
+
+    let animation: Animation;
+    const timeoutId = setTimeout(() => {
+      if (!node) return;
+      animation = node.animate(
+        [
+          {
+            transform: `translateX(${-100}%)`,
+          },
+          {
+            transform: `translateX(${-50}%)`,
+            offset: 0.2,
+          },
+          {
+            transform: `translateX(${0}%)`,
+            easing: 'ease-out',
+          },
+        ],
+        {
+          duration: duration,
+          iterations: 1,
+          easing: 'linear',
+        },
+      );
+    }, delay);
+    return () => {
+      clearTimeout(timeoutId);
+      if (animation) animation.cancel();
+    };
+  }, [duration, loading]);
+
+  return (
+    <div className={styles.container}>
+      <div
+        className={styles.inner}
+        style={{
+          transform: `translateX(${-100}%)`,
+        }}
+        ref={barRef}
+      ></div>
+    </div>
+  );
+};
+LoadingBar.defaults = {
+  duration: 200,
+  loading: false,
+};
+
+export default LoadingBar;