A **super smooth and customizable** **navigation progress bar** for **Svelte 5**, powered by: - **๐ Svelte 5 Runes** (`$state`, `$derived`) - **๐ svelte/motion** (`Tween`) - **๐จ TailwindCSS v4** - **๐ฎ tailwind-variants & tailwind-merge** for ultimate
npm install @friendofsvelte/progressA super smooth and customizable navigation progress bar for Svelte 5, powered by:
- ๐ Svelte 5 Runes ($state, $derived)
- ๐ svelte/motion (Tween)
- ๐จ TailwindCSS v4
- ๐ฎ tailwind-variants & tailwind-merge for ultimate styling flexibility.
---
cubicOut ๐ข ---
---
``sh`
npm install @friendofsvelte/progress
---
svelte
`#### You can also control it dynamically:
`svelte
`---
๐จ Customization
$3
| Variant | Height |
|---------|--------|
| "sm" | 0.5rem |
| "md" (default) | 1rem |
| "lg" | 1.5rem |$3
| Variant | Gradient |
|---------|----------|
| "blue" | from-sky-700 to-indigo-700 |
| "rose" | from-rose-700 to-rose-500 |
| "amber" | from-amber-700 to-amber-500 |
| "green" | from-green-700 to-green-500 |
| "purple" | from-purple-700 to-purple-500 |
| "indigo" | from-indigo-700 to-indigo-500 |
| "red" | from-red-700 to-red-500 |
| "yellow" | from-yellow-700 to-yellow-500 |---
Sure! Here's a cute and fun way to let them know they can customize the navigation logic, but seriously, why would they? because this component is already perfect! ๐โจ
---
$3
Okay, okayโwe get it. You love control. You want to tweak everything.๐ Guess what? You can! If you're feeling adventurous, you can create your own progress component using
let nav state.`svelte
``But let's be realโ you probably wonโt need to.
Why? Because this component already does all the magic for you! ๐ชโจ
Unless you have some wild navigation setup (like, interdimensional travel? ๐), you can just sit back, relax, and let this super smooth, stylish progress bar do all the heavy lifting for you.
> "Customization is great, but perfection is effortless. Let Progress do its thing." โ Some wise Svelte Wizard ๐งโโ๏ธ
> "Good UI is invisible, but you can definitely feel when it's missing!" ๐
---
---