Use svg in CircularLoading

* update * use only one job * Use svg in CircularLoading
luz-ojeda · Jun 5, 2024 · b1ebfc8 · b1ebfc8
1 parent 36e4615
commit b1ebfc8
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 27 deletions.
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
@@ -23,7 +23,7 @@
 	{type}
 >
 	{#if loading}
-		<CircularLoading --background="#a19887" --circle-width="30px" />
+		<CircularLoading width="30" />
 	{:else}
 		<slot />
 	{/if}
@@ -48,7 +48,7 @@
 			background-color: $grey500;
 		}
 
-		&:active {
+		&:active:enabled {
 			box-shadow: $smallestShadow;
 		}
 	}

diff --git a/src/lib/components/CircularLoading.svelte b/src/lib/components/CircularLoading.svelte
@@ -1,27 +1,21 @@
-<div class="circle spin-animation"></div>
+<script>
+	export let width = "50"
+</script>
 
-<style lang="scss">
-	@import '../../sass/colors.scss';
-
-	.circle {
-		width: var(--circle-width);
-		height: var(--circle-width);
-		background: conic-gradient($darkPrimaryColor 90deg, $lightestPrimaryColor 0deg);
-		border-radius: 50%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.circle::before {
-		background-color: var(--background, $grey300);
-		content: '';
-		position: absolute;
-		width: 80%;
-		height: 80%;
-		border-radius: 50%;
-	}
+<svg class="spin-animation" width={width} height={width} viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M50 25C50 38.8071 38.8071 50 25 50C11.1929 50 0 38.8071 0 25C0 11.1929 11.1929 0 25 0C38.8071 0 50 11.1929 50 25ZM5 25C5 36.0457 13.9543 45 25 45C36.0457 45 45 36.0457 45 25C45 13.9543 36.0457 5 25 5C13.9543 5 5 13.9543 5 25Z"
+        fill="url(#paint0_linear_180_426)" />
+    <defs>
+        <linearGradient id="paint0_linear_180_426" x1="25" y1="0" x2="25" y2="50"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C96845" />
+            <stop offset="1" stop-color="#633322" stop-opacity="0" />
+        </linearGradient>
+    </defs>
+</svg>
 
+<style>
 	.spin-animation {
 		animation-duration: 1.5s;
 		animation-name: rotate;

diff --git a/src/lib/components/ImageUploadInput.svelte b/src/lib/components/ImageUploadInput.svelte
@@ -104,7 +104,7 @@
 		/>
 		{#if fileReader?.readyState == 1}
 			<!-- 1 = 'LOADING' -->
-			<CircularLoading --background="#e9e9ed" --circle-width="60px" />
+			<CircularLoading width="64" />
 		{/if}
 	</label>
 </button>

diff --git a/src/routes/recetas-guardadas/+page.svelte b/src/routes/recetas-guardadas/+page.svelte
@@ -16,7 +16,7 @@
 	<div class="container">
 		{#if !$savedIds.loadingIdsFromLocalStorage}
 			{#if $savedRecipes.loading}
-				<CircularLoading --circle-width="72px" />
+				<CircularLoading width="72" />
 			{:else if !message}
 				{#if $savedRecipes.recipes && $savedRecipes.recipes.length > 0}
 					<div class="recipes-container">

diff --git a/src/routes/recetas/+page.svelte b/src/routes/recetas/+page.svelte
@@ -74,7 +74,7 @@
 			{/if}
 		{:else if $recipes.loading}
 			<div class="w-100 h-100 flex-full-center">
-				<CircularLoading --background="#e7e2da" --circle-width="72px" />
+				<CircularLoading width="72" />
 			</div>
 		{:else if !$recipes.loading && $recipes.recipes !== undefined}
 			<div class="h-100">