From 65be3fba483e614dbdfda2cc93067785140d260d Mon Sep 17 00:00:00 2001
From: dufu1991 <dufu1991@163.com>
Date: Mon, 1 Apr 2024 22:00:55 +0800
Subject: [PATCH] [demo]Update english loading demo.

---
 demo/src/routes/en_US/loading/+page.svelte | 52 +++++++++++-----------
 demo/src/routes/zh_CN/loading/+page.svelte | 10 ++---
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/demo/src/routes/en_US/loading/+page.svelte b/demo/src/routes/en_US/loading/+page.svelte
index 654c96f8..690ceecb 100644
--- a/demo/src/routes/en_US/loading/+page.svelte
+++ b/demo/src/routes/en_US/loading/+page.svelte
@@ -13,7 +13,7 @@
 		return arr;
 	};
 
-	const arr1 = new Array(22);
+	const arr1 = new Array(54);
 	const arr2 = new Array(6);
 	const arr4 = new Array(4);
 	const labels = [{ text: 'One color' }, { text: 'Two color' }, { text: 'Four color' }, { text: 'Other' }];
@@ -35,38 +35,38 @@
 					<!-- eslint-disable-next-line no-unused-vars -->
 					{#each arr1 as item, i}
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'1_' + i} bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'1_' + i}</div>
+							<div class="text-xs text-center mt-8">{'1_' + i}</div>
 						</div>
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'1_' + i} theme bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'1_' + i}</div>
+							<div class="text-xs text-center mt-8">{'1_' + i}</div>
 						</div>
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'1_' + i} theme customColor={randomColorArr(1)} bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'1_' + i}</div>
+							<div class="text-xs text-center mt-8">{'1_' + i}</div>
 						</div>
 						<div
-							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray-800 dark:bg-gray-100 text-white dark:text-black"
+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-darkBlack dark:bg-darkWhite text-white dark:text-black"
 						>
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'1_' + i} inverse bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'1_' + i}</div>
+							<div class="text-xs text-center mt-8">{'1_' + i}</div>
 						</div>
 						<div
-							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray-800 dark:bg-gray-100 text-white dark:text-black"
+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-darkBlack dark:bg-darkWhite text-white dark:text-black"
 						>
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'1_' + i} theme inverse bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'1_' + i}</div>
+							<div class="text-xs text-center mt-8">{'1_' + i}</div>
 						</div>
 					{/each}
 				</div>
@@ -84,24 +84,24 @@
 					<!-- eslint-disable-next-line no-unused-vars -->
 					{#each arr2 as item, i}
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'2_' + i} bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'2_' + i}</div>
+							<div class="text-xs text-center mt-8">{'2_' + i}</div>
 						</div>
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'2_' + i} customColor={randomColorArr(2)} bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'2_' + i}</div>
+							<div class="text-xs text-center mt-8">{'2_' + i}</div>
 						</div>
 						<div
-							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray-800 dark:bg-gray-100 text-white dark:text-black"
+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-darkBlack dark:bg-darkWhite text-white dark:text-black"
 						>
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'2_' + i} inverse bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'2_' + i}</div>
+							<div class="text-xs text-center mt-8">{'2_' + i}</div>
 						</div>
 					{/each}
 				</div>
@@ -119,16 +119,16 @@
 					<!-- eslint-disable-next-line no-unused-vars -->
 					{#each arr4 as item, i}
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'4_' + i} bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'4_' + i}</div>
+							<div class="text-xs text-center mt-8">{'4_' + i}</div>
 						</div>
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'4_' + i} customColor={randomColorArr(4)} bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'4_' + i}</div>
+							<div class="text-xs text-center mt-8">{'4_' + i}</div>
 						</div>
 					{/each}
 				</div>
@@ -142,11 +142,11 @@
 	</Tabs>
 </div>
 <!-- The button group fixed at the bottom, control speed -->
-<div class="sticky bottom-0 left-0 w-full flex gap-3 justify-between px-2 z-10 bg-white/90 dark:bg-black/90">
+<div class="sticky bottom-0 left-0 w-full flex gap-3 justify-between px-2 z-10 bg-white/60 dark:bg-black/60 backdrop-blur">
 	{#each speedBtns as item}
 		<div class="flex-1">
 			<Button fill={speed === item ? 'base' : 'lineTheme'} size="full" injClass="text-xs px-2" on:click={() => (speed = item)}>
-				{item} speed
+				{item}x speed
 			</Button>
 		</div>
 	{/each}
diff --git a/demo/src/routes/zh_CN/loading/+page.svelte b/demo/src/routes/zh_CN/loading/+page.svelte
index 3a4843a7..921a380a 100644
--- a/demo/src/routes/zh_CN/loading/+page.svelte
+++ b/demo/src/routes/zh_CN/loading/+page.svelte
@@ -84,13 +84,13 @@
 					<!-- eslint-disable-next-line no-unused-vars -->
 					{#each arr2 as item, i}
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'2_' + i} bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'2_' + i}</div>
 						</div>
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'2_' + i} customColor={randomColorArr(2)} bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'2_' + i}</div>
@@ -98,7 +98,7 @@
 						<div
 							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-darkBlack dark:bg-darkWhite text-white dark:text-black"
 						>
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'2_' + i} inverse bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'2_' + i}</div>
@@ -119,13 +119,13 @@
 					<!-- eslint-disable-next-line no-unused-vars -->
 					{#each arr4 as item, i}
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'4_' + i} bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'4_' + i}</div>
 						</div>
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'4_' + i} customColor={randomColorArr(4)} bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'4_' + i}</div>