✨ feat: Add nav-progress bad

packages/ui/src/nav-progress/index.tsx

@@ -0,0 +1,43 @@
+import { component$, useStyles$, useVisibleTask$ } from '@builder.io/qwik'
+import { useLocation } from '@builder.io/qwik-city'
+import type { NProgressOptions } from 'nprogress'
+import nProgress from 'nprogress'
+import nProgressStyles from 'nprogress/nprogress.css?inline'
+import nPrStyles from './npr.css?inline'
+
+interface Props {
+    options?: Partial<NProgressOptions> &
+    Partial<{
+        color: string
+        height: string
+    }>
+}
+
+export const NavProgress = component$(({ options = {} }: Props) => {
+    // const CSS_VAR_PREFIX = '--nav-progress-'
+
+    useStyles$(nProgressStyles + nPrStyles)
+
+    nProgress.configure({ showSpinner: false, ...options })
+
+    const location = useLocation()
+
+    // eslint-disable-next-line qwik/no-use-visible-task
+    useVisibleTask$(({ track }) => {
+        const isNavigating = track(() => location.isNavigating)
+        if (isNavigating) nProgress.start()
+        else nProgress.done()
+    })
+
+    // return (
+    //     <style
+    //         dangerouslySetInnerHTML={`
+    //   :root {
+    //     ${options.color ? `${CSS_VAR_PREFIX}color: ${options.color};` : ''}
+    //     ${options.height ? `${CSS_VAR_PREFIX}height: ${options.height};` : ''}
+    //   }
+    // `}
+    //     ></style>
+    // )
+    return <div data-name="progress" />
+})

packages/ui/src/nav-progress/npr.css

@@ -0,0 +1,53 @@
+#nprogress .bar {
+    background: theme("colors.primary.500");
+    height: 2px;
+    z-index: 80;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+    box-shadow: 0 0 10px theme("colors.primary.500"),
+        0 0 5px theme("colors.primary.500");
+    z-index: 80;
+}
+
+#nprogress .spinner-icon {
+    border-top-color: theme("colors.primary.500");
+    border-left-color: theme("colors.primary.500");
+    display: none;
+}
+
+html.dark #nprogress .bar {
+    background: theme("colors.primary.500");
+    height: 2px;
+}
+
+html.dark #nprogress .peg {
+    box-shadow: 0 0 10px theme("colors.primary.500"),
+        0 0 5px theme("colors.primary.500");
+}
+
+html.dark .spinner-icon {
+    border-top-color: theme("colors.primary.500");
+    border-left-color: theme("colors.primary.500");
+    display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+
+    #nprogress .bar {
+        background: theme("colors.primary.500");
+        height: 2px;
+    }
+
+    #nprogress .peg {
+        box-shadow: 0 0 10px theme("colors.primary.500"),
+            0 0 5px theme("colors.primary.500");
+    }
+
+    .spinner-icon {
+        border-top-color: theme("colors.primary.500");
+        border-left-color: theme("colors.primary.500");
+        display: none;
+    }
+}