From 26ce291313a9ade6f7ea75b2514e950535a18581 Mon Sep 17 00:00:00 2001
From: Abdullah Mallik <mdn522@gmail.com>
Date: Wed, 10 Sep 2025 08:40:22 +0600
Subject: [PATCH] Make Progress component durations and easings configurable

Added new props to the Progress component to allow customization of animation durations and easing functions for each phase. This provides greater flexibility for consumers to control the progress bar's behavior. Updated default values and refactored internal usage to use these new props.
---
 package.json            |  2 +-
 src/lib/Progress.svelte | 35 ++++++++++++++++++++++++++++-------
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 5585abb..ace6ae9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@friendofsvelte/progress",
-	"version": "0.0.8",
+	"version": "0.0.9",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
diff --git a/src/lib/Progress.svelte b/src/lib/Progress.svelte
index 620dad6..33d3e0a 100644
--- a/src/lib/Progress.svelte
+++ b/src/lib/Progress.svelte
@@ -40,22 +40,43 @@
 		class?: string;
 		size?: keyof NavType['variants']['size'];
 		color?: keyof NavType['variants']['color'];
+		initialDuration?: number;
+		firstPhaseDuration?: number;
+		secondPhaseDuration?: number;
+		completionDuration?: number;
+		resetDelay?: number;
+		firstPhaseEasing?;
+		secondPhaseEasing?;
+		completionEasing?;
 	}
 </script>
 
 <script lang="ts">
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import { Tween } from 'svelte/motion';
-	import { cubicOut } from 'svelte/easing';
+	import { cubicOut, linear } from 'svelte/easing';
 	import { navigating } from '$app/state';
 
-	let { size, color, class: className }: ProgressProps = $props();
-	let progress = new Tween(0, { duration: 500 });
+	let {
+		size,
+		color,
+		class: className,
+		initialDuration = 500,
+		firstPhaseDuration = 900,
+		secondPhaseDuration = 600,
+		completionDuration = 800,
+		resetDelay = 500,
+		firstPhaseEasing = cubicOut,
+		secondPhaseEasing = cubicOut,
+		completionEasing = linear
+	}: ProgressProps = $props();
+
+	let progress = new Tween(0, { duration: initialDuration });
 
 	const progressReset = () => {
 		setTimeout(() => {
 			progress.set(0, { duration: 0 });
-		}, 500);
+		}, resetDelay);
 	};
 
 	const progressStyle = $derived(`width: ${progress.current}%`);
@@ -67,8 +88,8 @@
 	beforeNavigate(async (navigation) => {
 		if (!isDiffNavigation(navigation)) {
 			await progress.set(0, { duration: 0 });
-			await progress.set(35, { duration: 900, easing: cubicOut });
-			await progress.set(75, { duration: 600, easing: cubicOut });
+			await progress.set(35, { duration: firstPhaseDuration, easing: firstPhaseEasing });
+			await progress.set(75, { duration: secondPhaseDuration, easing: secondPhaseEasing });
 		} else {
 			await progress.set(0, { duration: 0 });
 		}
@@ -76,7 +97,7 @@
 
 	afterNavigate(async (navigation) => {
 		if (!isDiffNavigation(navigation)) {
-			await progress.set(100, { duration: 800 });
+			await progress.set(100, { duration: completionDuration, easing: completionEasing });
 			progressReset();
 		} else {
 			await progress.set(0, { duration: 0 });