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 |
|---------|--------|
| | 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!" 🚀
---
---