Progress

friendofsvelte

Simple quick progress bar in svelte 5

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 styling flexibility.

✨ Features

✅ Beautiful animated navigation progress
✅ Fully customizable 🖌️ (Size & Color Variants)
✅ Super optimized with Svelte 5 runes ⚡
✅ Smooth easing animations with cubicOut 🎢
✅ No dependencies (except Tailwind utilities) 🎯

📸 Preview

🚀 Installation

If you're using this in a SvelteKit project, install the necessary dependencies first:

npm install @friendofsvelte/progress

🛠️ Usage

Import the component & customize it!

<script>
    import { Progress } from "@friendofsvelte/progress";
</script>

<Progress size="md" color="green" />

You can also control it dynamically:

<script>
    const size = "lg";
    const color = "rose";
</script>

<Progress {size} {color} />

🎨 Customization

🌟 Sizes

Variant	Height
`"sm"`	`0.5rem`
`"md"` (default)	`1rem`
`"lg"`	`1.5rem`

🌈 Colors

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! 😎✨

🎨 Custom component (but like, do you even need to?) 💅

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.

<script lang="ts">
    type Nav = {
      is_navigating: boolen,
      progress: Tween, 
    }
    import { nav } from "@friendofsvelte/progress";
</script>
<div custom-nav-progress ...></div>

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 🧙‍♂️

💖 Why Use This?

Because who doesn’t love a beautiful, animated progress bar? 😍
It makes navigation feel smoother, more dynamic, and polished!

"Good UI is invisible, but you can definitely feel when it's missing!" 🚀

📜 License

📝 MIT – use it however you like! Just give some love back ❤️

🤝 Contributing

👋 Found a bug or have an idea? Open an issue or PR – I’d love to see your improvements!

Top categories