Skip to content

Commit

Permalink
[demo]Update english loading demo.
Browse files Browse the repository at this point in the history
  • Loading branch information
@dufu1991
dufu1991 committed Apr 1, 2024
1 parent 2cf8ea2 commit 65be3fb
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 31 deletions.
52 changes: 26 additions & 26 deletions demo/src/routes/en_US/loading/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' }];
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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}
Expand Down
10 changes: 5 additions & 5 deletions demo/src/routes/zh_CN/loading/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,21 +84,21 @@
<!-- 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>
</div>
<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>
Expand All @@ -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>
Expand Down

0 comments on commit 65be3fb

Please sign in to comment.