add custom progressbar, adjust icons

src/lib/Progressbar.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { cubicOut } from "svelte/easing";
+  import { tweened } from "svelte/motion";
+  import { twMerge, twJoin } from "tailwind-merge";
+
+  export let progress: string | number | undefined = "45";
+  export let precision = 0;
+  export let tweenDuration = 400;
+  export let animate = false;
+  export let size = "h-2.5";
+  export let labelInside = false;
+  export let labelOutside = "";
+  export let easing = cubicOut;
+  export let color = "primary";
+  export let labelInsideClass =
+    "text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full";
+  export let divClass = "w-full bg-gray-200 rounded-full dark:bg-gray-700";
+  export let indeterminate = false;
+
+  const barColors: Record<string, string> = {
+    primary: "bg-primary-600",
+    blue: "bg-blue-600",
+    gray: "bg-gray-600 dark:bg-gray-300",
+    red: "bg-red-600 dark:bg-red-500",
+    green: "bg-green-600 dark:bg-green-500",
+    yellow: "bg-yellow-400",
+    purple: "bg-purple-600 dark:bg-purple-500",
+    indigo: "bg-indigo-600 dark:bg-indigo-500",
+  };
+
+  const _progress = tweened(0, {
+    duration: animate && !indeterminate ? tweenDuration : 0,
+    easing,
+  });
+
+  $: {
+    if (!indeterminate) {
+      _progress.set(Number(progress));
+    }
+  }
+</script>
+
+{#if labelOutside}
+  <div
+    {...$$restProps}
+    class={twMerge("flex justify-between mb-1", $$props.classLabelOutside)}
+  >
+    <span class="text-base font-medium text-blue-700 dark:text-white"
+      >{labelOutside}</span
+    >
+    <span class="text-sm font-medium text-blue-700 dark:text-white"
+      >{progress}%</span
+    >
+  </div>
+{/if}
+
+<div class={twMerge(divClass, size, $$props.class)}>
+  {#if labelInside}
+    {#if !indeterminate}
+      <div
+        class={twJoin(labelInsideClass, barColors[color])}
+        style="width: {$_progress}%"
+      >
+        {$_progress.toFixed(precision)}%
+      </div>
+    {:else}
+      <div
+        class={twJoin(
+          barColors[color],
+          size,
+          "indeterminate rounded-full animate-pulse"
+        )}
+      />
+    {/if}
+  {:else if !indeterminate}
+    <div
+      class={twJoin(barColors[color], size, "rounded-full")}
+      style="width: {$_progress}%"
+    />
+  {:else}
+    <div
+      class={twJoin(
+        barColors[color],
+        size,
+        "indeterminate rounded-full animate-pulse"
+      )}
+    />
+  {/if}
+</div>