[demo]Update english loading demo.

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}

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>