feat: scroll-progress component

src/components/scroll-progress/index.tsx

@@ -0,0 +1,31 @@
+import { HTMLMotionProps, MotionValue, m, useSpring } from 'framer-motion';
+import { CSSProperties } from 'react';
+
+import { useThemeToken } from '@/theme/hooks';
+
+interface Props extends HTMLMotionProps<'div'> {
+  color?: string;
+  scrollYProgress: MotionValue<number>;
+  height?: number;
+}
+/**
+ * https://www.framer.com/motion/scroll-animations/##spring-smoothing
+ */
+export default function ScrollProgress({ scrollYProgress, height = 4, color, ...other }: Props) {
+  const scaleX = useSpring(scrollYProgress, {
+    stiffness: 100,
+    damping: 30,
+    restDelta: 0.001,
+  });
+
+  const { colorPrimary } = useThemeToken();
+  const backgroundColor = color || colorPrimary;
+
+  const style: CSSProperties = {
+    transformOrigin: '0%',
+    height,
+    backgroundColor,
+  };
+
+  return <m.div style={{ scaleX, ...style }} {...other} />;
+}

src/layouts/dashboard/main.tsx

@@ -8,7 +8,7 @@ import BreadCrumb from '../_common/bread-crumb';
 export default function Main() {
   const { themeStretch } = useSettings();
   return (
-    <Content className="px-4">
+    <Content className="overflow-auto px-4">
       {/* <!-- ===== Content Start ===== --> */}
       <BreadCrumb />
       <div

src/pages/components/scroll/index.tsx

@@ -1,43 +1,13 @@
-import { Card, Col, Row } from 'antd';
+import { TabsProps, Tabs } from 'antd';
 
-import Scrollbar from '@/components/scrollbar';
+import ScrollbarView from './views/scroll-bar';
+import ScrollProgressView from './views/scroll-progress';
 
-const TEXT = `Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Quisque ut nisi.
- Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Vestibulum eu odio.
-  Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Cras ultricies mi eu turpis hendrerit fringilla. 
-  Phasellus consectetuer vestibulum elit. Phasellus magna. Nullam tincidunt adipiscing enim. 
-  Vestibulum volutpat pretium libero. Nullam quis ante. Morbi mollis tellus ac sapien.
-   Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. 
-   Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
-   Fusce ac felis sit amet ligula pharetra condimentum. Morbi mattis ullamcorper velit. 
-   Vivamus consectetuer hendrerit lacus. Nullam quis ante. Praesent turpis. 
-   Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. 
-   Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Quisque ut nisi. 
-   Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Vestibulum eu odio. 
-   Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Cras ultricies mi eu turpis hendrerit fringilla. 
-   Phasellus consectetuer vestibulum elit. Phasellus magna. Nullam tincidunt adipiscing enim. Vestibulum volutpat pretium libero. 
-   Nullam quis ante. Morbi mollis tellus ac sapien. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. 
-   Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
-   Fusce ac felis sit amet ligula pharetra condimentum. Morbi mattis ullamcorper velit. 
-   Vivamus consectetuer hendrerit lacus. Nullam quis ante. Praesent turpis. 
-   Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.`;
 export default function Scroll() {
-  return (
-    <Row gutter={20}>
-      <Col span={12}>
-        <Card title="Vertical">
-          <div className="h-80">
-            <Scrollbar>{TEXT}</Scrollbar>
-          </div>
-        </Card>
-      </Col>
-      <Col span={12}>
-        <Card title="Horizontal">
-          <Scrollbar>
-            <div style={{ width: '200%' }}>{TEXT}</div>
-          </Scrollbar>
-        </Card>
-      </Col>
-    </Row>
-  );
+  const TABS: TabsProps['items'] = [
+    { key: 'scrollbar', label: 'Scrollbar', children: <ScrollbarView /> },
+    { key: 'scroll-progress', label: 'ScrollProgress', children: <ScrollProgressView /> },
+  ];
+
+  return <Tabs items={TABS} />;
 }

src/pages/components/scroll/views/scroll-bar/index.tsx

@@ -0,0 +1,43 @@
+import { Card, Col, Row } from 'antd';
+
+import Scrollbar from '@/components/scrollbar';
+
+const TEXT = `Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Quisque ut nisi.
+ Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Vestibulum eu odio.
+  Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Cras ultricies mi eu turpis hendrerit fringilla. 
+  Phasellus consectetuer vestibulum elit. Phasellus magna. Nullam tincidunt adipiscing enim. 
+  Vestibulum volutpat pretium libero. Nullam quis ante. Morbi mollis tellus ac sapien.
+   Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. 
+   Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
+   Fusce ac felis sit amet ligula pharetra condimentum. Morbi mattis ullamcorper velit. 
+   Vivamus consectetuer hendrerit lacus. Nullam quis ante. Praesent turpis. 
+   Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. 
+   Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Quisque ut nisi. 
+   Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Vestibulum eu odio. 
+   Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Cras ultricies mi eu turpis hendrerit fringilla. 
+   Phasellus consectetuer vestibulum elit. Phasellus magna. Nullam tincidunt adipiscing enim. Vestibulum volutpat pretium libero. 
+   Nullam quis ante. Morbi mollis tellus ac sapien. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. 
+   Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
+   Fusce ac felis sit amet ligula pharetra condimentum. Morbi mattis ullamcorper velit. 
+   Vivamus consectetuer hendrerit lacus. Nullam quis ante. Praesent turpis. 
+   Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.`;
+export default function ScrollbarView() {
+  return (
+    <Row gutter={20}>
+      <Col span={12}>
+        <Card title="Vertical">
+          <div className="h-80">
+            <Scrollbar>{TEXT}</Scrollbar>
+          </div>
+        </Card>
+      </Col>
+      <Col span={12}>
+        <Card title="Horizontal">
+          <Scrollbar>
+            <div style={{ width: '200%' }}>{TEXT}</div>
+          </Scrollbar>
+        </Card>
+      </Col>
+    </Row>
+  );
+}

src/pages/components/scroll/views/scroll-progress/index.tsx

@@ -0,0 +1,40 @@
+import { Card } from 'antd';
+import { useScroll } from 'framer-motion';
+import { useRef } from 'react';
+
+import ScrollProgress from '@/components/scroll-progress';
+
+const TEXT = `Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Quisque ut nisi.
+ Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Vestibulum eu odio.
+  Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Cras ultricies mi eu turpis hendrerit fringilla. 
+  Phasellus consectetuer vestibulum elit. Phasellus magna. Nullam tincidunt adipiscing enim. 
+  Vestibulum volutpat pretium libero. Nullam quis ante. Morbi mollis tellus ac sapien.
+   Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. 
+   Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
+   Fusce ac felis sit amet ligula pharetra condimentum. Morbi mattis ullamcorper velit. 
+   Vivamus consectetuer hendrerit lacus. Nullam quis ante. Praesent turpis. 
+   Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. 
+   Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Quisque ut nisi. 
+   Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Vestibulum eu odio. 
+   Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Cras ultricies mi eu turpis hendrerit fringilla. 
+   Phasellus consectetuer vestibulum elit. Phasellus magna. Nullam tincidunt adipiscing enim. Vestibulum volutpat pretium libero. 
+   Nullam quis ante. Morbi mollis tellus ac sapien. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. 
+   Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
+   Fusce ac felis sit amet ligula pharetra condimentum. Morbi mattis ullamcorper velit. 
+   Vivamus consectetuer hendrerit lacus. Nullam quis ante. Praesent turpis. 
+   Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.`;
+export default function ScrollProgressView() {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const containerScroll = useScroll({ container: containerRef });
+
+  return (
+    <Card title="ScrollProgress">
+      <ScrollProgress scrollYProgress={containerScroll.scrollYProgress} />
+      <div ref={containerRef} className="h-80 overflow-auto">
+        {[...Array(4)].map((_, index) => (
+          <div key={index}>{TEXT}</div>
+        ))}
+      </div>
+    </Card>
+  );
+}

src/router/routes/modules/components.tsx

@@ -2,11 +2,11 @@ import { Suspense, lazy } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 
 import Loading from '@/components/loading';
-import Scroll from '@/pages/components/scroll';
 
 import { AppRouteObject } from '#/router';
 
 const Animate = lazy(() => import('@/pages/components/animate'));
+const Scroll = lazy(() => import('@/pages/components/scroll'));
 
 const components: AppRouteObject = {
   order: 3,