From 260989abee4c0b0a970d0d63e13cea3dee4bae07 Mon Sep 17 00:00:00 2001 From: dufu1991 <dufu1991@163.com> Date: Sun, 31 Mar 2024 15:34:25 +0800 Subject: [PATCH] [stdf]Add Loading component type and update version to 0.4.6 --- demo/package.json | 18 +- demo/src/routes/zh_CN/loading/+page.svelte | 38 ++--- doc/components/loading/guide.md | 2 +- doc/components/loading/guide_en.md | 2 +- doc/components/loading/version.md | 6 + doc/components/loading/version_en.md | 6 + doc/guide/changelog.md | 4 + doc/guide/changelog_en.md | 4 + .../stdf/components/loading/Loading.svelte | 98 ++++++++++- .../loading/loadings/fourColor/4_0.svelte | 4 +- .../loading/loadings/fourColor/4_1.svelte | 4 +- .../loading/loadings/fourColor/4_2.svelte | 4 +- .../loading/loadings/fourColor/4_3.svelte | 4 +- .../loading/loadings/oneColor/1_0.svelte | 4 +- .../loading/loadings/oneColor/1_1.svelte | 4 +- .../loading/loadings/oneColor/1_10.svelte | 4 +- .../loading/loadings/oneColor/1_11.svelte | 4 +- .../loading/loadings/oneColor/1_12.svelte | 4 +- .../loading/loadings/oneColor/1_13.svelte | 4 +- .../loading/loadings/oneColor/1_14.svelte | 4 +- .../loading/loadings/oneColor/1_15.svelte | 4 +- .../loading/loadings/oneColor/1_16.svelte | 4 +- .../loading/loadings/oneColor/1_17.svelte | 4 +- .../loading/loadings/oneColor/1_18.svelte | 4 +- .../loading/loadings/oneColor/1_19.svelte | 4 +- .../loading/loadings/oneColor/1_2.svelte | 4 +- .../loading/loadings/oneColor/1_20.svelte | 4 +- .../loading/loadings/oneColor/1_21.svelte | 4 +- .../loading/loadings/oneColor/1_22.svelte | 73 +++++++++ .../loading/loadings/oneColor/1_23.svelte | 52 ++++++ .../loading/loadings/oneColor/1_24.svelte | 59 +++++++ .../loading/loadings/oneColor/1_25.svelte | 61 +++++++ .../loading/loadings/oneColor/1_26.svelte | 66 ++++++++ .../loading/loadings/oneColor/1_27.svelte | 59 +++++++ .../loading/loadings/oneColor/1_28.svelte | 43 +++++ .../loading/loadings/oneColor/1_29.svelte | 58 +++++++ .../loading/loadings/oneColor/1_3.svelte | 4 +- .../loading/loadings/oneColor/1_30.svelte | 92 +++++++++++ .../loading/loadings/oneColor/1_31.svelte | 41 +++++ .../loading/loadings/oneColor/1_32.svelte | 154 ++++++++++++++++++ .../loading/loadings/oneColor/1_33.svelte | 91 +++++++++++ .../loading/loadings/oneColor/1_34.svelte | 41 +++++ .../loading/loadings/oneColor/1_35.svelte | 42 +++++ .../loading/loadings/oneColor/1_36.svelte | 62 +++++++ .../loading/loadings/oneColor/1_37.svelte | 66 ++++++++ .../loading/loadings/oneColor/1_38.svelte | 87 ++++++++++ .../loading/loadings/oneColor/1_39.svelte | 125 ++++++++++++++ .../loading/loadings/oneColor/1_4.svelte | 4 +- .../loading/loadings/oneColor/1_40.svelte | 61 +++++++ .../loading/loadings/oneColor/1_41.svelte | 119 ++++++++++++++ .../loading/loadings/oneColor/1_42.svelte | 54 ++++++ .../loading/loadings/oneColor/1_43.svelte | 43 +++++ .../loading/loadings/oneColor/1_44.svelte | 54 ++++++ .../loading/loadings/oneColor/1_45.svelte | 72 ++++++++ .../loading/loadings/oneColor/1_46.svelte | 47 ++++++ .../loading/loadings/oneColor/1_47.svelte | 43 +++++ .../loading/loadings/oneColor/1_48.svelte | 57 +++++++ .../loading/loadings/oneColor/1_49.svelte | 41 +++++ .../loading/loadings/oneColor/1_5.svelte | 4 +- .../loading/loadings/oneColor/1_50.svelte | 42 +++++ .../loading/loadings/oneColor/1_51.svelte | 40 +++++ .../loading/loadings/oneColor/1_52.svelte | 40 +++++ .../loading/loadings/oneColor/1_53.svelte | 40 +++++ .../loading/loadings/oneColor/1_6.svelte | 4 +- .../loading/loadings/oneColor/1_7.svelte | 4 +- .../loading/loadings/oneColor/1_8.svelte | 4 +- .../loading/loadings/oneColor/1_9.svelte | 4 +- .../loading/loadings/oneColor/index.js | 64 ++++++++ .../loading/loadings/twoColor/2_0.svelte | 4 +- .../loading/loadings/twoColor/2_1.svelte | 4 +- .../loading/loadings/twoColor/2_2.svelte | 4 +- .../loading/loadings/twoColor/2_3.svelte | 4 +- .../loading/loadings/twoColor/2_4.svelte | 4 +- .../loading/loadings/twoColor/2_5.svelte | 4 +- packages/stdf/package.json | 2 +- 75 files changed, 2301 insertions(+), 96 deletions(-) create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_22.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_23.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_24.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_25.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_26.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_27.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_28.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_29.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_30.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_31.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_32.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_33.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_34.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_35.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_36.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_37.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_38.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_39.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_40.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_41.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_42.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_43.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_44.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_45.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_46.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_47.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_48.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_49.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_50.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_51.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_52.svelte create mode 100644 packages/stdf/components/loading/loadings/oneColor/1_53.svelte diff --git a/demo/package.json b/demo/package.json index e2b7ee3c..b3eb5eeb 100644 --- a/demo/package.json +++ b/demo/package.json @@ -84,18 +84,18 @@ "numKeyboard_en": "vite --mode numKeyboard_en" }, "devDependencies": { - "@sveltejs/adapter-static": "^3.0.0", - "@sveltejs/kit": "^2.0.1", - "@sveltejs/vite-plugin-svelte": "^3.0.1", - "autoprefixer": "^10.4.16", - "postcss": "^8.4.32", + "@sveltejs/adapter-static": "^3.0.1", + "@sveltejs/kit": "^2.5.4", + "@sveltejs/vite-plugin-svelte": "^3.0.2", + "autoprefixer": "^10.4.19", + "postcss": "^8.4.38", "rollup-plugin-stdf-icon": "file:../packages/rollup-plugin-stdf-icon", - "svelte": "^4.2.8", - "tailwindcss": "^3.3.6", - "vite": "^5.0.10" + "svelte": "^4.2.12", + "tailwindcss": "^3.4.1", + "vite": "^5.2.3" }, "type": "module", "dependencies": { - "svelte-confetti": "^1.3.1" + "svelte-confetti": "^1.3.2" } } diff --git a/demo/src/routes/zh_CN/loading/+page.svelte b/demo/src/routes/zh_CN/loading/+page.svelte index 3422dd0b..3a4843a7 100644 --- a/demo/src/routes/zh_CN/loading/+page.svelte +++ b/demo/src/routes/zh_CN/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: '单色' }, { text: '双色' }, { text: '四色' }, { text: '其他' }]; @@ -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> @@ -87,21 +87,21 @@ <div class="w-[30px] h-[30px]"> <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]"> <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]"> <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> @@ -122,13 +122,13 @@ <div class="w-[30px] h-[30px]"> <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]"> <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> diff --git a/doc/components/loading/guide.md b/doc/components/loading/guide.md index 36d778fe..a8eabe47 100644 --- a/doc/components/loading/guide.md +++ b/doc/components/loading/guide.md @@ -38,4 +38,4 @@ Loading 自带了一系列过渡动画,极端情况下,当页面同时有大 ## 感谢 -部分动效灵感来自 [德育处主任](http://k21vin.gitee.io/front-end-data-visualization/#/native/pureCSS/loading),特此感谢。 +部分动效灵感来自 [德育处主任](http://k21vin.gitee.io/front-end-data-visualization/#/native/pureCSS/loading) 与 [LDRS](https://uiball.com/ldrs), 感谢他们的分享。 diff --git a/doc/components/loading/guide_en.md b/doc/components/loading/guide_en.md index d772fb7f..dc4d9c31 100644 --- a/doc/components/loading/guide_en.md +++ b/doc/components/loading/guide_en.md @@ -38,4 +38,4 @@ Loading comes with a series of transition animations. In extreme cases, when the ## Acknowledgments -Some of the animation inspirations are from [德育处主任](http://k21vin.gitee.io/front-end-data-visualization/#/native/pureCSS/loading). Special thanks go to him. +Some of the animation inspirations are from [德育处主任](http://k21vin.gitee.io/front-end-data-visualization/#/native/pureCSS/loading) and [LDRS](https://uiball.com/ldrs). Special thanks go to them. diff --git a/doc/components/loading/version.md b/doc/components/loading/version.md index 303622c5..e0489144 100644 --- a/doc/components/loading/version.md +++ b/doc/components/loading/version.md @@ -1,3 +1,9 @@ +## 0.4.6 + +- [!tag|A|0|]新增 32 种 Loading 类型(1_22 - 1_53)。 + +<font size=1>2024-03-31</font> + ## 0.0.6 - [!tag|A|0|]新增 8 种 Loading 类型(1_18、1_19、1_20、1_21、2_2、2_3、2_4、2_5)。 diff --git a/doc/components/loading/version_en.md b/doc/components/loading/version_en.md index 6145dd53..228465a3 100644 --- a/doc/components/loading/version_en.md +++ b/doc/components/loading/version_en.md @@ -1,3 +1,9 @@ +## 0.4.6 + +- [!tag|A|0|]Add 32 Loading type(1_22 - 1_53). + +<font size=1>2024-03-31</font> + ## 0.0.6 - [!tag|A|0|]Add 8 Loading type(1_18、1_19、1_20、1_21、2_2、2_3、2_4、2_5). diff --git a/doc/guide/changelog.md b/doc/guide/changelog.md index 932a2bbb..6072b745 100644 --- a/doc/guide/changelog.md +++ b/doc/guide/changelog.md @@ -1,3 +1,7 @@ +## 0.4.6 + +- 新增 Loading 类型,详见 [Loading](https://stdf.design/#/components?nav=loading&tab=4)。 + ## 0.4.5 - 修复 Pagination 组件,详见 [Pagination](https://stdf.design/#/components?nav=pagination&tab=4)。 diff --git a/doc/guide/changelog_en.md b/doc/guide/changelog_en.md index 7bdbe155..168f5751 100644 --- a/doc/guide/changelog_en.md +++ b/doc/guide/changelog_en.md @@ -1,3 +1,7 @@ +## 0.4.6 + +- Add Loading type, For more information, please see [Loading](https://stdf.design/#/components?nav=loading&tab=4). + ## 0.4.5 - Fixed the Pagination component, please see [Pagination](https://stdf.design/#/components?nav=pagination&tab=4). diff --git a/packages/stdf/components/loading/Loading.svelte b/packages/stdf/components/loading/Loading.svelte index e7146ac1..307e3aa5 100644 --- a/packages/stdf/components/loading/Loading.svelte +++ b/packages/stdf/components/loading/Loading.svelte @@ -23,6 +23,38 @@ Loading1_19, Loading1_20, Loading1_21, + Loading1_22, + Loading1_23, + Loading1_24, + Loading1_25, + Loading1_26, + Loading1_27, + Loading1_28, + Loading1_29, + Loading1_30, + Loading1_31, + Loading1_32, + Loading1_33, + Loading1_34, + Loading1_35, + Loading1_36, + Loading1_37, + Loading1_38, + Loading1_39, + Loading1_40, + Loading1_41, + Loading1_42, + Loading1_43, + Loading1_44, + Loading1_45, + Loading1_46, + Loading1_47, + Loading1_48, + Loading1_49, + Loading1_50, + Loading1_51, + Loading1_52, + Loading1_53, } from './loadings/oneColor'; import { Loading2_0, Loading2_1, Loading2_2, Loading2_3, Loading2_4, Loading2_5 } from './loadings/twoColor'; import { Loading4_0, Loading4_1, Loading4_2, Loading4_3 } from './loadings/fourColor'; @@ -187,7 +219,7 @@ }); </script> -<div bind:this={loadingDom}> +<div bind:this={loadingDom} class="w-full h-full"> <!--one--> {#if type === '1_0'} <Loading1_0 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> @@ -233,6 +265,70 @@ <Loading1_20 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> {:else if type === '1_21'} <Loading1_21 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_22'} + <Loading1_22 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_23'} + <Loading1_23 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_24'} + <Loading1_24 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_25'} + <Loading1_25 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_26'} + <Loading1_26 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_27'} + <Loading1_27 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_28'} + <Loading1_28 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_29'} + <Loading1_29 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_30'} + <Loading1_30 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_31'} + <Loading1_31 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_32'} + <Loading1_32 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_33'} + <Loading1_33 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_34'} + <Loading1_34 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_35'} + <Loading1_35 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_36'} + <Loading1_36 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_37'} + <Loading1_37 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_38'} + <Loading1_38 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_39'} + <Loading1_39 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_40'} + <Loading1_40 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_41'} + <Loading1_41 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_42'} + <Loading1_42 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_43'} + <Loading1_43 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_44'} + <Loading1_44 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_45'} + <Loading1_45 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_46'} + <Loading1_46 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_47'} + <Loading1_47 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_48'} + <Loading1_48 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_49'} + <Loading1_49 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_50'} + <Loading1_50 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_51'} + <Loading1_51 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_52'} + <Loading1_52 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> + {:else if type === '1_53'} + <Loading1_53 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed /> <!--twoColor--> {:else if type === '2_0'} diff --git a/packages/stdf/components/loading/loadings/fourColor/4_0.svelte b/packages/stdf/components/loading/loadings/fourColor/4_0.svelte index d01650fb..f0f6a52e 100644 --- a/packages/stdf/components/loading/loadings/fourColor/4_0.svelte +++ b/packages/stdf/components/loading/loadings/fourColor/4_0.svelte @@ -1,7 +1,7 @@ <script> export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; </script> <div diff --git a/packages/stdf/components/loading/loadings/fourColor/4_1.svelte b/packages/stdf/components/loading/loadings/fourColor/4_1.svelte index 909eb4dd..86592588 100644 --- a/packages/stdf/components/loading/loadings/fourColor/4_1.svelte +++ b/packages/stdf/components/loading/loadings/fourColor/4_1.svelte @@ -1,7 +1,7 @@ <script> export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; </script> <div class={`${size} m-auto relative rotate-45`}> diff --git a/packages/stdf/components/loading/loadings/fourColor/4_2.svelte b/packages/stdf/components/loading/loadings/fourColor/4_2.svelte index 6ead20c6..36caf882 100644 --- a/packages/stdf/components/loading/loadings/fourColor/4_2.svelte +++ b/packages/stdf/components/loading/loadings/fourColor/4_2.svelte @@ -1,7 +1,7 @@ <script> export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; </script> <div class={`${size} m-auto relative loading`} style="animation-duration: {1.6 / speed}s;-webkit-animation-duration: {1.6 / speed}s;"> diff --git a/packages/stdf/components/loading/loadings/fourColor/4_3.svelte b/packages/stdf/components/loading/loadings/fourColor/4_3.svelte index e20b2546..87eacf66 100644 --- a/packages/stdf/components/loading/loadings/fourColor/4_3.svelte +++ b/packages/stdf/components/loading/loadings/fourColor/4_3.svelte @@ -1,7 +1,7 @@ <script> export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; </script> <div class={`${size} m-auto relative loading`} style="animation-duration: {1.2 / speed}s;-webkit-animation-duration: {1.2 / speed}s;"> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_0.svelte b/packages/stdf/components/loading/loadings/oneColor/1_0.svelte index 2b5148ef..b9d52b2f 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_0.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_0.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_1.svelte b/packages/stdf/components/loading/loadings/oneColor/1_1.svelte index ea0dcd74..8d6c5999 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_1.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_1.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_10.svelte b/packages/stdf/components/loading/loadings/oneColor/1_10.svelte index 21067093..cd6c99ce 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_10.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_10.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_11.svelte b/packages/stdf/components/loading/loadings/oneColor/1_11.svelte index 3a162389..b063a47b 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_11.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_11.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_12.svelte b/packages/stdf/components/loading/loadings/oneColor/1_12.svelte index 9e4878a6..4200e3f6 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_12.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_12.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_13.svelte b/packages/stdf/components/loading/loadings/oneColor/1_13.svelte index 2a211cf1..e372b555 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_13.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_13.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_14.svelte b/packages/stdf/components/loading/loadings/oneColor/1_14.svelte index 49c5a2f7..605d30ea 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_14.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_14.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const borderClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_15.svelte b/packages/stdf/components/loading/loadings/oneColor/1_15.svelte index b3bd0ddd..bfc5c821 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_15.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_15.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_16.svelte b/packages/stdf/components/loading/loadings/oneColor/1_16.svelte index 0873b44d..ab9971d5 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_16.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_16.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_17.svelte b/packages/stdf/components/loading/loadings/oneColor/1_17.svelte index 68401849..c084f955 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_17.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_17.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_18.svelte b/packages/stdf/components/loading/loadings/oneColor/1_18.svelte index f92a62bd..30cf8c55 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_18.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_18.svelte @@ -1,7 +1,7 @@ <script> export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; export let theme = false; export let inverse = false; diff --git a/packages/stdf/components/loading/loadings/oneColor/1_19.svelte b/packages/stdf/components/loading/loadings/oneColor/1_19.svelte index f89a5e05..382e8cfc 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_19.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_19.svelte @@ -1,7 +1,7 @@ <script> export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; export let theme = false; export let inverse = false; diff --git a/packages/stdf/components/loading/loadings/oneColor/1_2.svelte b/packages/stdf/components/loading/loadings/oneColor/1_2.svelte index 6b873b77..3c32cd1c 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_2.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_2.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_20.svelte b/packages/stdf/components/loading/loadings/oneColor/1_20.svelte index 8d7919e2..03181cfe 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_20.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_20.svelte @@ -1,7 +1,7 @@ <script> export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; export let theme = false; export let inverse = false; diff --git a/packages/stdf/components/loading/loadings/oneColor/1_21.svelte b/packages/stdf/components/loading/loadings/oneColor/1_21.svelte index b64c94e9..68acfa3c 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_21.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_21.svelte @@ -1,7 +1,7 @@ <script> export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; export let theme = false; export let inverse = false; diff --git a/packages/stdf/components/loading/loadings/oneColor/1_22.svelte b/packages/stdf/components/loading/loadings/oneColor/1_22.svelte new file mode 100644 index 00000000..9697e387 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_22.svelte @@ -0,0 +1,73 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' text-dark dark:text-primary' : ' text-white dark:text-black'; + } else { + return theme ? ' text-primary dark:text-dark' : ' text-black dark:text-white'; + } + }; +</script> + +<div class="{size} m-auto" style="animation-duration: {2 / speed}s;-webkit-animation-duration: {2 / speed}s;"> + <svg + class="container overflow-visible will-change-transform origin-center{colorClass()}" + viewBox="0 0 40 40" + style="color: {customColor[0]}" + > + <circle class="track opacity-0 stroke-[5px]" stroke="currentColor" cx="20" cy="20" r="17.5" fill="none" /> + <circle + class="car stroke-[5px]" + style="animation-duration: {(2 / speed) * 0.75}s;-webkit-animation-duration: {(2 / speed) * 0.75}s;" + stroke="currentColor" + cx="20" + cy="20" + r="17.5" + fill="none" + /> + </svg> +</div> + +<style> + .container { + animation: rotate 2s linear infinite; + } + + .car { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + stroke-linecap: round; + animation: stretch 1.5s ease-in-out infinite; + will-change: stroke-dasharray, stroke-dashoffset; + transition: stroke 0.5s ease; + } + + .track { + transition: stroke 0.5s ease; + } + + @keyframes rotate { + 100% { + transform: rotate(360deg); + } + } + + @keyframes stretch { + 0% { + stroke-dasharray: 0, 150; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 75, 150; + stroke-dashoffset: -25; + } + 100% { + stroke-dashoffset: -100; + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_23.svelte b/packages/stdf/components/loading/loadings/oneColor/1_23.svelte new file mode 100644 index 00000000..01ff12ad --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_23.svelte @@ -0,0 +1,52 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto relative -translate-x-0.5"> + <!-- eslint-disable-next-line no-unused-vars --> + {#each new Array(12) as item, i} + <div + class="absolute left-1/2 flex flex-col w-[3px] h-8 gap-5 bg-transparent rounded-full" + style="transform: rotate(calc(360deg / -12*{i}));" + > + <div + class="h-1/5 rounded-full line{colorClass()}" + style="background: {customColor[0]};animation-delay: calc( {1 / speed}s / -12 * {i}); animation-duration: {1 / + speed}s;-webkit-animation-duration: {1 / speed}s;" + /> + </div> + {/each} +</div> + +<style> + .line { + animation: pulse ease-in-out infinite; + transition: background-color 0.3s ease; + transform-origin: center bottom; + } + + @keyframes pulse { + 0%, + 80%, + 100% { + transform: scaleY(0.75); + opacity: 0; + } + 20% { + transform: scaleY(1); + opacity: 1; + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_24.svelte b/packages/stdf/components/loading/loadings/oneColor/1_24.svelte new file mode 100644 index 00000000..6d6aebeb --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_24.svelte @@ -0,0 +1,59 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' stroke-dark dark:stroke-primary' : ' stroke-white dark:stroke-black'; + } else { + return theme ? ' stroke-primary dark:stroke-dark' : ' stroke-black dark:stroke-white'; + } + }; +</script> + +<div class="m-auto"> + <svg class="{size} overflow-visible origin-center" x="0px" y="0px" viewBox="0 0 37 37" preserveAspectRatio="xMidYMid meet"> + <path + class="opacity-10 {colorClass()}" + fill="none" + style="stroke: {customColor[0]};" + stroke-width="5" + pathLength="100" + d="M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5" + > + </path> + <path + class="car {colorClass()}" + fill="none" + style="stroke: {customColor[0]}; animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;" + stroke-width="5" + pathLength="100" + d="M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5" + > + </path> + </svg> +</div> + +<style> + .car { + stroke-dasharray: 15, 85; + stroke-dashoffset: 0; + stroke-linecap: round; + animation: travel linear infinite; + will-change: stroke-dasharray, stroke-dashoffset; + transition: stroke 0.5s ease; + } + + @keyframes travel { + 0% { + stroke-dashoffset: 0; + } + + 100% { + stroke-dashoffset: -100; + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_25.svelte b/packages/stdf/components/loading/loadings/oneColor/1_25.svelte new file mode 100644 index 00000000..cc19d01a --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_25.svelte @@ -0,0 +1,61 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' stroke-dark dark:stroke-primary' : ' stroke-white dark:stroke-black'; + } else { + return theme ? ' stroke-primary dark:stroke-dark' : ' stroke-black dark:stroke-white'; + } + }; +</script> + +<div class="m-auto"> + <svg class="{size} origin-center will-change-transform overflow-visible" viewBox="0 0 35 35"> + <rect + class="opacity-10 {colorClass()}" + style="stroke: {customColor[0]};" + x="2.5" + y="2.5" + fill="none" + stroke-width="5px" + width="32.5" + height="32.5" + /> + <rect + class="car {colorClass()}" + style="stroke: {customColor[0]}; animation-duration: {1.2 / speed}s;-webkit-animation-duration: {1.2 / speed}s;" + x="2.5" + y="2.5" + fill="none" + stroke-width="5px" + width="32.5" + height="32.5" + pathLength="100" + /> + </svg> +</div> + +<style> + .car { + stroke-dasharray: 25, 75; + stroke-dashoffset: 0; + animation: travel linear infinite; + will-change: stroke-dasharray, stroke-dashoffset; + transition: stroke 0.5s ease; + } + + @keyframes travel { + 0% { + stroke-dashoffset: 0; + } + + 100% { + stroke-dashoffset: -100; + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_26.svelte b/packages/stdf/components/loading/loadings/oneColor/1_26.svelte new file mode 100644 index 00000000..9501bf1c --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_26.svelte @@ -0,0 +1,66 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' stroke-dark dark:stroke-primary' : ' stroke-white dark:stroke-black'; + } else { + return theme ? ' stroke-primary dark:stroke-dark' : ' stroke-black dark:stroke-white'; + } + }; +</script> + +<div class="m-auto"> + <svg + class="{size} overflow-visible origin-center" + x="0px" + y="0px" + viewBox="0 0 37 37" + height="37" + width="37" + preserveAspectRatio="xMidYMid meet" + > + <path + class="opacity-10{colorClass()}" + fill="none" + style="stroke: {customColor[0]};" + stroke-width="5" + pathLength="100" + d="M36.63 31.746 c0 -13.394 -7.3260000000000005 -25.16 -18.13 -31.375999999999998 C7.696 6.66 0.37 18.352 0.37 31.746 c5.328 3.108 11.544 4.8839999999999995 18.13 4.8839999999999995 S31.301999999999996 34.854 36.63 31.746z" + ></path> + <path + class="car{colorClass()}" + fill="none" + style="stroke: {customColor[0]}; animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;" + stroke-width="5" + pathLength="100" + d="M36.63 31.746 c0 -13.394 -7.3260000000000005 -25.16 -18.13 -31.375999999999998 C7.696 6.66 0.37 18.352 0.37 31.746 c5.328 3.108 11.544 4.8839999999999995 18.13 4.8839999999999995 S31.301999999999996 34.854 36.63 31.746z" + ></path> + </svg> +</div> + +<style> + .car { + fill: none; + stroke-dasharray: 15, 85; + stroke-dashoffset: 0; + stroke-linecap: round; + animation: travel linear infinite; + will-change: stroke-dasharray, stroke-dashoffset; + transition: stroke 0.5s ease; + } + + @keyframes travel { + 0% { + stroke-dashoffset: 0; + } + + 100% { + stroke-dashoffset: 100; + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_27.svelte b/packages/stdf/components/loading/loadings/oneColor/1_27.svelte new file mode 100644 index 00000000..6135d7b0 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_27.svelte @@ -0,0 +1,59 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto container relative flex items-center" style="animation-duration: {2 / speed}s;"> + {#each [0, -0.835, -0.668, -0.501, -0.334, -0.167] as item} + <div + class="dot absolute left-0 right-0 flex" + style="animation-duration: {2 / speed}s; animation-delay: calc({2 / speed}s * {item} * 0.5);" + > + <div + class="w-1.5 h-1.5 rounded-full{colorClass()}" + style="background-color: {customColor[0]}; animation-delay: calc({2 / speed}s * {item} * 0.5);" + ></div> + </div> + {/each} +</div> + +<style> + .container { + /* --uib-speed: 1.5s; */ + animation: smoothRotate linear infinite; + } + + .dot { + animation: rotate ease-in-out infinite; + } + + @keyframes rotate { + 0% { + transform: rotate(0deg); + } + 65%, + 100% { + transform: rotate(360deg); + } + } + + @keyframes smoothRotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_28.svelte b/packages/stdf/components/loading/loadings/oneColor/1_28.svelte new file mode 100644 index 00000000..e6ca8b56 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_28.svelte @@ -0,0 +1,43 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto relative flex items-center"> + {#each [0, -0.875, -0.75, -0.625, -0.5, -0.375, -0.25, -0.125] as item, i} + <div class="absolute left-0 right-0 flex" style="transform: rotate(calc(360deg / 8 * {i})); "> + <div + class="dot w-1.5 h-1.5 rounded-full{colorClass()}" + style="background-color: {customColor[0]};animation-duration: {1 / speed}s ; animation-delay: calc({1 / speed}s * {item});" + ></div> + </div> + {/each} +</div> + +<style> + .dot { + animation: pulse ease-in-out infinite; + } + @keyframes pulse { + 0%, + 100% { + transform: scale(0); + opacity: 0.5; + } + 50% { + transform: scale(1); + opacity: 1; + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_29.svelte b/packages/stdf/components/loading/loadings/oneColor/1_29.svelte new file mode 100644 index 00000000..9c60e01c --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_29.svelte @@ -0,0 +1,58 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto relative flex items-center container"> + {#each [0, -0.125, -0.25, -0.375, -0.5, -0.625, -0.75, -0.875] as item, i} + <div class="absolute left-0 right-0 flex" style="transform: rotate({i * 45}deg); animation-duration: {0.3 / speed}s"> + <div + class="dot w-1.5 h-1.5 rounded-full{colorClass()}" + style="background-color: {customColor[0]}; transform: translateX(12px); animation-duration: {0.9 / + speed}s; animation-delay: calc({0.9 / speed}s * {item});" + ></div> + </div> + {/each} +</div> + +<style> + .container { + animation: rotate linear infinite; + } + + .dot { + animation: oscillate ease-in-out infinite alternate; + } + + @keyframes oscillate { + 0% { + transform: translateX(12px) scale(0); + opacity: 0.25; + } + + 100% { + transform: translateX(0) scale(1); + opacity: 1; + } + } + + @keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_3.svelte b/packages/stdf/components/loading/loadings/oneColor/1_3.svelte index b77812b9..7fe43cb3 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_3.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_3.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_30.svelte b/packages/stdf/components/loading/loadings/oneColor/1_30.svelte new file mode 100644 index 00000000..7336fc09 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_30.svelte @@ -0,0 +1,92 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto flex justify-between items-end"> + {#each [0, -0.36, -0.2] as item} + <div class="cube w-2 h-2" style="animation-duration: {1.75 / speed}s; animation-delay: calc({1.75 / speed}s * {item})"> + <div + class="cube__inner w-2 h-2 rounded-sm{colorClass()}" + style="background-color: {customColor[0]}; animation-duration: {1.75 / speed}s; animation-delay: calc({1.75 / speed}s * {item})" + ></div> + </div> + {/each} +</div> + +<style> + .cube { + animation: jump ease-in-out infinite; + } + + .cube__inner { + animation: morph ease-in-out infinite; + } + + @keyframes jump { + 0% { + transform: translateY(0px); + } + + 30% { + transform: translateY(0px); + animation-timing-function: ease-out; + } + + 50% { + transform: translateY(-200%); + animation-timing-function: ease-in; + } + + 75% { + transform: translateY(0px); + animation-timing-function: ease-in; + } + } + + @keyframes morph { + 0% { + transform: scaleY(1); + } + + 10% { + transform: scaleY(1); + } + + 20%, + 25% { + transform: scaleY(0.8) scaleX(1.3); + animation-timing-function: ease-in-out; + } + + 30% { + transform: scaleY(1.15) scaleX(0.9); + animation-timing-function: ease-in-out; + } + + 40% { + transform: scaleY(1); + } + + 70%, + 85%, + 100% { + transform: scaleY(1); + } + + 75% { + transform: scaleY(0.8) scaleX(1.2); + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_31.svelte b/packages/stdf/components/loading/loadings/oneColor/1_31.svelte new file mode 100644 index 00000000..7e1b6310 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_31.svelte @@ -0,0 +1,41 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto flex items-center justify-between"> + {#each [-0.45, -0.3, -0.15, 0] as item} + <div + class="bar h-full w-[3px]{colorClass()}" + style="background-color: {customColor[0]}; animation-duration: {1 / speed}s; animation-delay: {1 * item}s" + ></div> + {/each} +</div> + +<style> + .bar { + animation: grow ease-in-out infinite; + } + + @keyframes grow { + 0%, + 100% { + transform: scaleY(0.3); + } + + 50% { + transform: scaleY(1); + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_32.svelte b/packages/stdf/components/loading/loadings/oneColor/1_32.svelte new file mode 100644 index 00000000..7e22a030 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_32.svelte @@ -0,0 +1,154 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto relative"> + <div + class="line1 absolute w-1 h-1{colorClass()}" + style="background-color: {customColor[0]}; top: calc(50% - 2px); left: calc(50% - 2px); animation-duration: {4 / speed}s;" + /> + <div class="line2 absolute w-1 h-1{colorClass()}" style="background-color: {customColor[0]}; animation-duration: {4 / speed}s;" /> + <div + class="line2 absolute w-1 h-1{colorClass()}" + style="background-color: {customColor[0]}; animation-duration: {4 / speed}s; animation-delay: calc({4 / speed}s * -0.5);" + /> +</div> + +<style> + .line1 { + animation: center-line ease infinite; + } + + .line2 { + animation: explore ease infinite; + } + + @keyframes center-line { + 0%, + 25%, + 50%, + 75%, + 100% { + transform: scaleX(1) scaleY(1); + } + 12.5%, + 62.5% { + transform: scaleX(8) scaleY(1); + } + 37.5%, + 87.5% { + transform: scaleX(1) scaleY(8); + } + } + + @keyframes explore { + 0%, + 100% { + transform: scaleX(1) scaleY(1) translate(0%, 0%); + transform-origin: top left; + top: 0; + left: 0; + } + + 12.5% { + transform: scaleX(8) scaleY(1) translate(0%, 0%); + transform-origin: top left; + top: 0; + left: 0; + } + + 12.50001% { + transform: scaleX(8) scaleY(1) translate(0%, 0%); + transform-origin: top right; + top: 0; + left: initial; + right: 0; + } + + 25% { + transform: scaleX(1) scaleY(1) translate(0%, 0%); + transform-origin: top right; + top: 0; + left: initial; + right: 0; + } + + 37.5% { + transform: scaleX(1) scaleY(8) translate(0%, 0%); + transform-origin: top right; + top: 0; + left: initial; + right: 0; + } + + 37.5001% { + transform: scaleX(1) scaleY(8) translate(0%, 0%); + transform-origin: bottom right; + top: initial; + bottom: 0; + left: initial; + right: 0; + } + + 50% { + transform: scaleX(1) scaleY(1) translate(0%, 0%); + transform-origin: bottom right; + top: initial; + bottom: 0; + left: initial; + right: 0; + } + + 62.5% { + transform: scaleX(8) scaleY(1) translate(0%, 0%); + transform-origin: bottom right; + top: initial; + bottom: 0; + left: initial; + right: 0; + } + + 62.5001% { + transform: scaleX(8) scaleY(1) translate(0%, 0%); + transform-origin: bottom left; + top: initial; + bottom: 0; + left: 0; + } + + 75% { + transform: scaleX(1) scaleY(1) translate(0%, 0%); + transform-origin: bottom left; + top: initial; + bottom: 0; + left: 0; + } + + 87.5% { + transform: scaleX(1) scaleY(8) translate(0%, 0%); + transform-origin: bottom left; + top: initial; + bottom: 0; + left: 0; + } + + 87.5001% { + transform: scaleX(1) scaleY(8) translate(0%, 0%); + transform-origin: top left; + top: 0; + left: 0; + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_33.svelte b/packages/stdf/components/loading/loadings/oneColor/1_33.svelte new file mode 100644 index 00000000..63f67b04 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_33.svelte @@ -0,0 +1,91 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto container relative flex flex-col rotate-45" style="animation-duration: {3.5 / speed}s;"> + <div + class="w-[13.92px] h-[13.92px] absolute flex items-center justify-center overflow-hidden isolation" + style="top: 8.25%; left: 8.25%; border-radius: 50% 50% calc(32px / 15);" + > + <div class="absolute top-0 left-0 w-full h-full opacity-10{colorClass()}" style="background-color: {customColor[0]};"></div> + <div + class="half1 origin-bottom-right relative w-full h-full{colorClass()}" + style="background-color: {customColor[0]}; animation-duration: {3.5 / speed}s;" + ></div> + </div> + <div + class="w-[13.92px] h-[13.92px] absolute flex items-center justify-center overflow-hidden isolation" + style="bottom: 8.25%; right: 8.25%; transform: rotate(180deg); align-self: flex-end; border-radius: 50% 50% calc(32px / 15);" + > + <div class="absolute top-0 left-0 w-full h-full opacity-10{colorClass()}" style="background-color: {customColor[0]};"></div> + <div + class="half2 origin-bottom-right relative w-full h-full z-10{colorClass()}" + style="background-color: {customColor[0]}; animation-delay: -{3.5 / speed / 2}s; animation-duration: {3.5 / speed}s;" + ></div> + </div> +</div> + +<style> + .container { + animation: rotate ease-in-out infinite; + } + + .half1 { + animation: flow linear infinite both; + border-radius: 0 0 1.6px 0; + transform: rotate(45deg) translate(-3%, 50%) scaleX(1.2); + } + + .half2 { + animation: flow linear infinite both; + border-radius: 0 0 1.6px 0; + transform: rotate(45deg) translate(-3%, 50%) scaleX(1.2); + } + + @keyframes flow { + 0% { + transform: rotate(45deg) translate(-3%, 50%) scaleX(1.2); + } + 30% { + transform: rotate(45deg) translate(115%, 50%) scaleX(1.2); + } + + 30.001%, + 50% { + transform: rotate(0deg) translate(-85%, -85%) scaleX(1); + } + + 80%, + 100% { + transform: rotate(0deg) translate(0%, 0%) scaleX(1); + } + } + + @keyframes rotate { + 0%, + 30% { + transform: rotate(45deg); + } + + 50%, + 80% { + transform: rotate(225deg); + } + + 100% { + transform: rotate(405deg); + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_34.svelte b/packages/stdf/components/loading/loadings/oneColor/1_34.svelte new file mode 100644 index 00000000..dd341499 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_34.svelte @@ -0,0 +1,41 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div + class=" {size} m-auto relative top-1/2 -translate-y-1/2 flex items-center justify-center rounded-full overflow-hidden" + style="height:4px" +> + <div class="absolute left-0 w-full h-full opacity-10{colorClass()}" style="background-color: {customColor[0]};"></div> + <div + class="container w-full h-full rounded-full{colorClass()}" + style="background-color: {customColor[0]}; animation-duration: {1.5 / speed}s" + ></div> +</div> + +<style> + .container { + animation: zoom ease-in-out infinite; + } + + @keyframes zoom { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_35.svelte b/packages/stdf/components/loading/loadings/oneColor/1_35.svelte new file mode 100644 index 00000000..10538d75 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_35.svelte @@ -0,0 +1,42 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div + class=" {size} m-auto relative top-1/2 -translate-y-1/2 flex items-center justify-center rounded-full overflow-hidden" + style="height:4px" +> + <div class="absolute left-0 w-full h-full opacity-10{colorClass()}" style="background-color: {customColor[0]};"></div> + <div + class="container w-full h-full rounded-full{colorClass()}" + style="background-color: {customColor[0]}; animation-duration: {2 / speed}s" + ></div> +</div> + +<style> + .container { + animation: zoom ease-in-out infinite; + } + + @keyframes zoom { + 0%, + 100% { + transform: translateX(-95%); + } + 50% { + transform: translateX(95%); + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_36.svelte b/packages/stdf/components/loading/loadings/oneColor/1_36.svelte new file mode 100644 index 00000000..c096779c --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_36.svelte @@ -0,0 +1,62 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' stroke-dark dark:stroke-primary' : ' stroke-white dark:stroke-black'; + } else { + return theme ? ' stroke-primary dark:stroke-dark' : ' stroke-black dark:stroke-white'; + } + }; +</script> + +<div class="{size} m-auto flex flex-col justify-center"> + <svg + class="{size} m-auto w-full h-full origin-center overflow-visible" + x="0px" + y="0px" + viewBox="0 0 55 23.1" + preserveAspectRatio="xMidYMid meet" + > + <path + class="opacity-10{colorClass()}" + fill="none" + style="stroke: {customColor[0]};" + stroke-width="5" + pathLength="100" + d="M26.7,12.2c3.5,3.4,7.4,7.8,12.7,7.8c5.5,0,9.6-4.4,9.6-9.5C49,5,45.1,1,39.8,1c-5.5,0-9.5,4.2-13.1,7.8l-3.4,3.3c-3.6,3.6-7.6,7.8-13.1,7.8C4.9,20,1,16,1,10.5C1,5.4,5.1,1,10.6,1c5.3,0,9.2,4.5,12.7,7.8L26.7,12.2z" + /> + <path + class="car{colorClass()}" + fill="none" + style="stroke: {customColor[0]}; animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 / speed}s;" + stroke-width="5" + pathLength="100" + d="M26.7,12.2c3.5,3.4,7.4,7.8,12.7,7.8c5.5,0,9.6-4.4,9.6-9.5C49,5,45.1,1,39.8,1c-5.5,0-9.5,4.2-13.1,7.8l-3.4,3.3c-3.6,3.6-7.6,7.8-13.1,7.8C4.9,20,1,16,1,10.5C1,5.4,5.1,1,10.6,1c5.3,0,9.2,4.5,12.7,7.8L26.7,12.2z" + /> + </svg> +</div> + +<style> + .car { + stroke-dasharray: 15, 85; + stroke-dashoffset: 0; + stroke-linecap: round; + animation: travel linear infinite; + will-change: stroke-dasharray, stroke-dashoffset; + } + + @keyframes travel { + 0% { + stroke-dashoffset: 0; + } + + 100% { + stroke-dashoffset: 100; + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_37.svelte b/packages/stdf/components/loading/loadings/oneColor/1_37.svelte new file mode 100644 index 00000000..f7fe0707 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_37.svelte @@ -0,0 +1,66 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' stroke-dark dark:stroke-primary' : ' stroke-white dark:stroke-black'; + } else { + return theme ? ' stroke-primary dark:stroke-dark' : ' stroke-black dark:stroke-white'; + } + }; +</script> + +<div class="{size} m-auto"> + <svg + class="origin-center overflow-visible w-full h-full" + x="0px" + y="0px" + viewBox="0 0 40 40" + height="40" + width="40" + preserveAspectRatio="xMidYMid meet" + > + <path + class="opacity-10{colorClass()}" + style="stroke: {customColor[0]};" + fill="none" + stroke-width="4" + pathLength="100" + d="M29.760000000000005 18.72 c0 7.28 -3.9200000000000004 13.600000000000001 -9.840000000000002 16.96 c -2.8800000000000003 1.6800000000000002 -6.24 2.64 -9.840000000000002 2.64 c -3.6 0 -6.88 -0.96 -9.76 -2.64 c0 -7.28 3.9200000000000004 -13.52 9.840000000000002 -16.96 c2.8800000000000003 -1.6800000000000002 6.24 -2.64 9.76 -2.64 S26.880000000000003 17.040000000000003 29.760000000000005 18.72 c5.84 3.3600000000000003 9.76 9.68 9.840000000000002 16.96 c -2.8800000000000003 1.6800000000000002 -6.24 2.64 -9.76 2.64 c -3.6 0 -6.88 -0.96 -9.840000000000002 -2.64 c -5.84 -3.3600000000000003 -9.76 -9.68 -9.76 -16.96 c0 -7.28 3.9200000000000004 -13.600000000000001 9.76 -16.96 C25.84 5.120000000000001 29.760000000000005 11.440000000000001 29.760000000000005 18.72z" + > + </path> + <path + class="car{colorClass()}" + style="stroke: {customColor[0]}; animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 / speed}s;" + fill="none" + stroke-width="4" + pathLength="100" + d="M29.760000000000005 18.72 c0 7.28 -3.9200000000000004 13.600000000000001 -9.840000000000002 16.96 c -2.8800000000000003 1.6800000000000002 -6.24 2.64 -9.840000000000002 2.64 c -3.6 0 -6.88 -0.96 -9.76 -2.64 c0 -7.28 3.9200000000000004 -13.52 9.840000000000002 -16.96 c2.8800000000000003 -1.6800000000000002 6.24 -2.64 9.76 -2.64 S26.880000000000003 17.040000000000003 29.760000000000005 18.72 c5.84 3.3600000000000003 9.76 9.68 9.840000000000002 16.96 c -2.8800000000000003 1.6800000000000002 -6.24 2.64 -9.76 2.64 c -3.6 0 -6.88 -0.96 -9.840000000000002 -2.64 c -5.84 -3.3600000000000003 -9.76 -9.68 -9.76 -16.96 c0 -7.28 3.9200000000000004 -13.600000000000001 9.76 -16.96 C25.84 5.120000000000001 29.760000000000005 11.440000000000001 29.760000000000005 18.72z" + > + </path> + </svg> +</div> + +<style> + .car { + stroke-dasharray: 15, 85; + stroke-dashoffset: 0; + stroke-linecap: round; + animation: travel linear infinite; + will-change: stroke-dasharray, stroke-dashoffset; + } + + @keyframes travel { + 0% { + stroke-dashoffset: 0; + } + + 100% { + stroke-dashoffset: -100; + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_38.svelte b/packages/stdf/components/loading/loadings/oneColor/1_38.svelte new file mode 100644 index 00000000..c525768a --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_38.svelte @@ -0,0 +1,87 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' stroke-dark dark:stroke-primary' : ' stroke-white dark:stroke-black'; + } else { + return theme ? ' stroke-primary dark:stroke-dark' : ' stroke-black dark:stroke-white'; + } + }; +</script> + +<div class="{size} m-auto"> + <svg + class="w-full h-full origin-center overflow-visible" + x="0px" + y="0px" + viewBox="0 0 50 31.25" + height="31.25" + width="50" + preserveAspectRatio="xMidYMid meet" + > + <path + class="track opacity-10{colorClass()}" + style="stroke: {customColor[0]};" + stroke-width="4" + fill="none" + pathLength="100" + d="M0.625 21.5 h10.25 l3.75 -5.875 l7.375 15 l9.75 -30 l7.375 20.875 v0 h10.25" + /> + <path + class="car{colorClass()}" + style="stroke: {customColor[0]}; animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 / speed}s;" + stroke-width="4" + fill="none" + pathLength="100" + d="M0.625 21.5 h10.25 l3.75 -5.875 l7.375 15 l9.75 -30 l7.375 20.875 v0 h10.25" + /> + </svg> +</div> + +<style> + .car { + stroke-dasharray: 100; + stroke-dashoffset: 0; + stroke-linecap: round; + stroke-linejoin: round; + animation: + travel ease-in-out infinite, + fade ease-out infinite; + will-change: stroke-dasharray, stroke-dashoffset; + } + + .track { + stroke-linecap: round; + stroke-linejoin: round; + } + + @keyframes travel { + 0% { + stroke-dashoffset: 100; + } + + 75% { + stroke-dashoffset: 0; + } + } + + @keyframes fade { + 0% { + opacity: 0; + } + + 20%, + 55% { + opacity: 1; + } + + 100% { + opacity: 0; + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_39.svelte b/packages/stdf/components/loading/loadings/oneColor/1_39.svelte new file mode 100644 index 00000000..fd553c33 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_39.svelte @@ -0,0 +1,125 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto flex flex-col items-center justify-center"> + {#each [0, 1, 2, 3, 4, 5] as item} + <div class="relative w-full" style="height: calc(32px / 6);"> + <div + class="slice absolute top-0 h-full rounded-full shrink-0{colorClass()}" + style="background-color: {customColor[0]};left: calc(50% - 32px / 12);width: calc(100% / 6);animation-duration: {2.5 / + speed}s;animation-delay: {-(2.5 / speed / 6) * item}s;" + ></div> + <div + class="slice absolute top-0 h-full rounded-full shrink-0{colorClass()}" + style="background-color: {customColor[0]};left: calc(50% - 32px / 12);width: calc(100% / 6);animation-duration: {2.5 / + speed}s;animation-delay: {-(2.5 / speed / 2) - (2.5 / speed / 6) * item}s;" + ></div> + </div> + {/each} +</div> + +<style> + .slice { + animation: orbit linear infinite; + } + + @keyframes orbit { + 0% { + transform: translateX(calc(32px * 0.25)) scale(0.73684); + opacity: 0.65; + } + 5% { + transform: translateX(calc(32px * 0.235)) scale(0.684208); + opacity: 0.58; + } + 10% { + transform: translateX(calc(32px * 0.182)) scale(0.631576); + opacity: 0.51; + } + 15% { + transform: translateX(calc(32px * 0.129)) scale(0.578944); + opacity: 0.44; + } + 20% { + transform: translateX(calc(32px * 0.076)) scale(0.526312); + opacity: 0.37; + } + 25% { + transform: translateX(0%) scale(0.47368); + opacity: 0.3; + } + 30% { + transform: translateX(calc(32px * -0.076)) scale(0.526312); + opacity: 0.37; + } + 35% { + transform: translateX(calc(32px * -0.129)) scale(0.578944); + opacity: 0.44; + } + 40% { + transform: translateX(calc(32px * -0.182)) scale(0.631576); + opacity: 0.51; + } + 45% { + transform: translateX(calc(32px * -0.235)) scale(0.684208); + opacity: 0.58; + } + 50% { + transform: translateX(calc(32px * -0.25)) scale(0.73684); + opacity: 0.65; + } + 55% { + transform: translateX(calc(32px * -0.235)) scale(0.789472); + opacity: 0.72; + } + 60% { + transform: translateX(calc(32px * -0.182)) scale(0.842104); + opacity: 0.79; + } + 65% { + transform: translateX(calc(32px * -0.129)) scale(0.894736); + opacity: 0.86; + } + 70% { + transform: translateX(calc(32px * -0.076)) scale(0.947368); + opacity: 0.93; + } + 75% { + transform: translateX(0%) scale(1); + opacity: 1; + } + 80% { + transform: translateX(calc(32px * 0.076)) scale(0.947368); + opacity: 0.93; + } + 85% { + transform: translateX(calc(32px * 0.129)) scale(0.894736); + opacity: 0.86; + } + 90% { + transform: translateX(calc(32px * 0.182)) scale(0.842104); + opacity: 0.79; + } + 95% { + transform: translateX(calc(32px * 0.235)) scale(0.789472); + opacity: 0.72; + } + 100% { + transform: translateX(calc(32px * 0.25)) scale(0.73684); + opacity: 0.65; + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_4.svelte b/packages/stdf/components/loading/loadings/oneColor/1_4.svelte index 2ccc3cc7..e775063e 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_4.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_4.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_40.svelte b/packages/stdf/components/loading/loadings/oneColor/1_40.svelte new file mode 100644 index 00000000..f62de50b --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_40.svelte @@ -0,0 +1,61 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; + const brList = [ + [24, -35], + [16, -6], + [8, 23], + [-1, 51], + [38, -17.5], + [30, 10], + [22, 39], + [14, 67], + [53, -0.8], + [44.5, 27], + [36, 55.7], + [28.7, 84.3], + [66.8, 15], + [58.8, 43], + [50, 72], + [42, 100], + ]; +</script> + +<div class="{size} m-auto relative flex items-center"> + {#each [-0.48, -0.4, -0.32, -0.24, -0.4, -0.32, -0.24, -0.16, -0.32, -0.24, -0.16, -0.08, -0.24, -0.16, -0.08, -0] as item, i} + <div + class="dot absolute h-1 w-1 rounded-full{colorClass()}" + style="background-color: {customColor[0]};bottom: calc({brList[i][0]}% + 1.6px);right: calc({brList[ + i + ][1]}% + 1.6px);animation-duration: {1.5 / speed}s;animation-delay: {(1.5 / speed) * item}s" + ></div> + {/each} +</div> + +<style> + .dot { + animation: jump ease-in-out infinite; + } + + @keyframes jump { + 0%, + 100% { + transform: translateY(120%); + } + + 50% { + transform: translateY(-120%); + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_41.svelte b/packages/stdf/components/loading/loadings/oneColor/1_41.svelte new file mode 100644 index 00000000..ae0b57bf --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_41.svelte @@ -0,0 +1,119 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto relative"> + <div + class="container absolute top-2.5 left-2.5 h-3 w-3 rounded-full{colorClass()}" + style="background-color: {customColor[0]};animation-duration: {1.5 / speed}s;" + ></div> + <div + class="container absolute top-2.5 left-2.5 h-3 w-3 rounded-full{colorClass()}" + style="background-color: {customColor[0]};animation-duration: {1.5 / speed}s;animation-delay: {0.75 / speed}s" + ></div> +</div> + +<style> + .container { + animation: orbit linear infinite; + } + + @keyframes orbit { + 0% { + transform: translateX(calc(32px * 0.25)) scale(0.73684); + opacity: 0.65; + } + 5% { + transform: translateX(calc(32px * 0.235)) scale(0.684208); + opacity: 0.58; + } + 10% { + transform: translateX(calc(32px * 0.182)) scale(0.631576); + opacity: 0.51; + } + 15% { + transform: translateX(calc(32px * 0.129)) scale(0.578944); + opacity: 0.44; + } + 20% { + transform: translateX(calc(32px * 0.076)) scale(0.526312); + opacity: 0.37; + } + 25% { + transform: translateX(0%) scale(0.47368); + opacity: 0.3; + } + 30% { + transform: translateX(calc(32px * -0.076)) scale(0.526312); + opacity: 0.37; + } + 35% { + transform: translateX(calc(32px * -0.129)) scale(0.578944); + opacity: 0.44; + } + 40% { + transform: translateX(calc(32px * -0.182)) scale(0.631576); + opacity: 0.51; + } + 45% { + transform: translateX(calc(32px * -0.235)) scale(0.684208); + opacity: 0.58; + } + 50% { + transform: translateX(calc(32px * -0.25)) scale(0.73684); + opacity: 0.65; + } + 55% { + transform: translateX(calc(32px * -0.235)) scale(0.789472); + opacity: 0.72; + } + 60% { + transform: translateX(calc(32px * -0.182)) scale(0.842104); + opacity: 0.79; + } + 65% { + transform: translateX(calc(32px * -0.129)) scale(0.894736); + opacity: 0.86; + } + 70% { + transform: translateX(calc(32px * -0.076)) scale(0.947368); + opacity: 0.93; + } + 75% { + transform: translateX(0%) scale(1); + opacity: 1; + } + 80% { + transform: translateX(calc(32px * 0.076)) scale(0.947368); + opacity: 0.93; + } + 85% { + transform: translateX(calc(32px * 0.129)) scale(0.894736); + opacity: 0.86; + } + 90% { + transform: translateX(calc(32px * 0.182)) scale(0.842104); + opacity: 0.79; + } + 95% { + transform: translateX(calc(32px * 0.235)) scale(0.789472); + opacity: 0.72; + } + 100% { + transform: translateX(calc(32px * 0.25)) scale(0.73684); + opacity: 0.65; + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_42.svelte b/packages/stdf/components/loading/loadings/oneColor/1_42.svelte new file mode 100644 index 00000000..51c71de2 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_42.svelte @@ -0,0 +1,54 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto relative inline-block container" style="animation-duration: {1.5 / speed}s;"> + {#each [120, -120, 0] as item} + <div class="absolute h-full" style="transform: rotate({item}deg);left: 37.5%;width:25%;"> + <div + class="dot absolute top-0 left-0 h-0 w-full rounded-full{colorClass()}" + style="background-color: {customColor[0]};padding-bottom: 100%;animation-duration: {1.5 / speed}s;" + ></div> + </div> + {/each} +</div> + +<style> + .container { + animation: spin infinite linear; + } + .dot { + animation: wobble infinite ease-in-out; + } + + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + + @keyframes wobble { + 0%, + 100% { + transform: translateY(0%); + } + 50% { + transform: translateY(65%); + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_43.svelte b/packages/stdf/components/loading/loadings/oneColor/1_43.svelte new file mode 100644 index 00000000..537dd49f --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_43.svelte @@ -0,0 +1,43 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto flex flex-col justify-center"> + <div class="flex justify-between items-center"> + {#each [-0.45, -0.3, -0.15, 0] as item} + <div + class="dot w-1.5 h-1.5 rounded-full{colorClass()}" + style="background-color: {customColor[0]};animation-duration: {1 / speed}s;animation-delay: {(1 / speed) * item}s" + ></div> + {/each} + </div> +</div> + +<style> + .dot { + animation: jump ease-in-out infinite; + } + + @keyframes jump { + 0%, + 100% { + transform: translateY(100%); + } + + 50% { + transform: translateY(-100%); + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_44.svelte b/packages/stdf/components/loading/loadings/oneColor/1_44.svelte new file mode 100644 index 00000000..656eb253 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_44.svelte @@ -0,0 +1,54 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto relative"> + {#each [0, 0.4, 0.8] as item, i} + <div + class="dot absolute top-0 left-0 flex items-center w-full h-full" + style="animation-duration: {2.5 / speed}s;transform: translateX({32 * item}px);animation-delay: {2.5 / speed / (-1.5 * i)}s" + > + <div class="rounded-full w-2 h-2{colorClass()}" style="background-color: {customColor[0]};"></div> + </div> + {/each} +</div> + +<style> + .dot { + animation: leapFrog ease infinite; + } + + @keyframes leapFrog { + 0% { + transform: translateX(0) rotate(0deg); + } + + 33.333% { + transform: translateX(0) rotate(180deg); + } + + 66.666% { + transform: translateX(calc(32px * -0.38)) rotate(180deg); + } + + 99.999% { + transform: translateX(calc(32px * -0.78)) rotate(180deg); + } + + 100% { + transform: translateX(0) rotate(0deg); + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_45.svelte b/packages/stdf/components/loading/loadings/oneColor/1_45.svelte new file mode 100644 index 00000000..1f511280 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_45.svelte @@ -0,0 +1,72 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto flex items-center justify-center"> + {#each [0, 1, 2, 3] as item} + <div + class="dot relative flex items-center h-full w-1/4" + class:dot1={item === 0} + class:dot2={item === 3} + style="transform-origin: center top;animation-duration: {1.5 / speed}s;" + > + <div class="w-full h-1/4 rounded-full{colorClass()}" style="background-color: {customColor[0]};"></div> + </div> + {/each} +</div> + +<style> + .dot1 { + animation: swing linear infinite; + } + + .dot2 { + animation: swing2 linear infinite; + } + + @keyframes swing { + 0% { + transform: rotate(0deg); + animation-timing-function: ease-out; + } + + 25% { + transform: rotate(70deg); + animation-timing-function: ease-in; + } + + 50% { + transform: rotate(0deg); + animation-timing-function: linear; + } + } + + @keyframes swing2 { + 0% { + transform: rotate(0deg); + animation-timing-function: linear; + } + + 50% { + transform: rotate(0deg); + animation-timing-function: ease-out; + } + + 75% { + transform: rotate(-70deg); + animation-timing-function: ease-in; + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_46.svelte b/packages/stdf/components/loading/loadings/oneColor/1_46.svelte new file mode 100644 index 00000000..466c2546 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_46.svelte @@ -0,0 +1,47 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto flex flex-col justify-center"> + <div class="relative flex items-center justify-between w-full h-1/5 -translate-x-[10%]"> + {#each [0, -0.2, -0.4, -0.6, -0.8] as item} + <div + class="dot absolute w-1/5 h-full rounded-full{colorClass()}" + style="background-color: {customColor[0]};animation-delay: {(2.5 / speed) * item}s;animation-duration: {2.5 / speed}s" + ></div> + {/each} + </div> +</div> + +<style> + .dot { + animation: stream linear infinite both; + } + + @keyframes stream { + 0%, + 100% { + transform: translateX(0) scale(0); + } + + 50% { + transform: translateX(16px) scale(1); + } + + 99.999% { + transform: translateX(32px) scale(0); + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_47.svelte b/packages/stdf/components/loading/loadings/oneColor/1_47.svelte new file mode 100644 index 00000000..05267e57 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_47.svelte @@ -0,0 +1,43 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto flex flex-col justify-center"> + <div class="relative flex items-center justify-between"> + {#each [-0.375, -0.25, -0.125] as item} + <div + class="dot w-2 h-2 rounded-full{colorClass()}" + style="background-color: {customColor[0]};animation-duration: {1.3 / speed}s;animation-delay: {(1.3 / speed) * item}s" + /> + {/each} + </div> +</div> + +<style> + .dot { + animation: pulse ease-in-out infinite both; + } + + @keyframes pulse { + 0%, + 100% { + transform: scale(0); + } + + 50% { + transform: scale(1); + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_48.svelte b/packages/stdf/components/loading/loadings/oneColor/1_48.svelte new file mode 100644 index 00000000..4fe862d9 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_48.svelte @@ -0,0 +1,57 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto relative flex items-center -rotate-90"> + {#each [1, 0.9, 0.6, 0.4] as item, i} + <div + class="dot absolute left-0 h-full w-full flex flex-col items-center" + style="animation-duration: {1.6 / speed}s;animation-delay: {(1.6 / speed) * -(0.4 - i * 0.09)}s;" + > + <div + class="w-1/4 h-1/4 rounded-full{colorClass()}" + style="background-color: {customColor[0]};opacity: {item};transform: scale({1 - 0.1 * i});" + ></div> + </div> + {/each} +</div> + +<style> + .dot { + animation: swing linear infinite; + } + + @keyframes swing { + 0% { + transform: rotate(0deg); + } + + 15% { + transform: rotate(0deg); + } + + 50% { + transform: rotate(180deg); + } + + 65% { + transform: rotate(180deg); + } + + 100% { + transform: rotate(0deg); + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_49.svelte b/packages/stdf/components/loading/loadings/oneColor/1_49.svelte new file mode 100644 index 00000000..d778ff51 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_49.svelte @@ -0,0 +1,41 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto relative"> + {#each [0, -2] as item} + <div + class="dot absolute top-0 left-0 w-full h-full rounded-full{colorClass()}" + style="background-color: {customColor[0]};animation-duration: {2 / speed}s;animation-delay: {2 / speed / item}s;" + ></div> + {/each} +</div> + +<style> + .dot { + animation: pulse linear infinite; + } + + @keyframes pulse { + 0% { + transform: scale(0); + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 0; + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_5.svelte b/packages/stdf/components/loading/loadings/oneColor/1_5.svelte index 4c940fcf..b26c337e 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_5.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_5.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_50.svelte b/packages/stdf/components/loading/loadings/oneColor/1_50.svelte new file mode 100644 index 00000000..4062e84c --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_50.svelte @@ -0,0 +1,42 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto relative"> + {#each [0, -2] as item} + <div + class="dot absolute top-0 left-0 w-full h-full rounded-full{colorClass()}" + style="background-color: {customColor[0]};animation-duration: {2 / speed}s;animation-delay: {2 / speed / item}s;" + ></div> + {/each} +</div> + +<style> + .dot { + animation: pulse linear infinite; + } + + @keyframes pulse { + 0%, + 100% { + transform: scale(0); + opacity: 1; + } + 50% { + transform: scale(1); + opacity: 0.25; + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_51.svelte b/packages/stdf/components/loading/loadings/oneColor/1_51.svelte new file mode 100644 index 00000000..a621b81f --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_51.svelte @@ -0,0 +1,40 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto relative"> + {#each [0, -0.25, -0.5, -0.75] as item} + <div + class="dot absolute top-0 left-0 w-full h-full rounded-full scale-0 opacity-0{colorClass()}" + style="background-color: {customColor[0]};animation-duration: {2 / speed}s;animation-delay: {(2 / speed) * item}s" + ></div> + {/each} +</div> + +<style> + .dot { + animation: pulse linear infinite; + } + @keyframes pulse { + 0% { + transform: scale(0); + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 0; + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_52.svelte b/packages/stdf/components/loading/loadings/oneColor/1_52.svelte new file mode 100644 index 00000000..ccc9d572 --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_52.svelte @@ -0,0 +1,40 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto relative w-full h-full"> + {#each [[-0.375, 1], [-0.375, 0.8], [-0.3, 0.6], [-0.225, 0.4], [-0.15, 0.2], [-0.075, 0.1]] as item} + <div + class="line absolute left-0 h-1 w-full rounded-full{colorClass()}" + style="background-color: {customColor[0]};top: calc(50% - 2px);animation-duration: {0.9 / speed}s;animation-delay: {(0.9 / speed) * + item[0]}s;opacity: {item[1]};" + ></div> + {/each} +</div> + +<style> + .line { + animation: rotate ease-in-out infinite alternate; + } + @keyframes rotate { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(180deg); + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_53.svelte b/packages/stdf/components/loading/loadings/oneColor/1_53.svelte new file mode 100644 index 00000000..7e8d50fd --- /dev/null +++ b/packages/stdf/components/loading/loadings/oneColor/1_53.svelte @@ -0,0 +1,40 @@ +<script> + export let theme = false; + export let inverse = false; + export let size = 'w-8 h-8'; + export let customColor = []; + export let speed = 1; + + const colorClass = () => { + if (inverse) { + return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black'; + } else { + return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white'; + } + }; +</script> + +<div class="{size} m-auto relative w-full h-full"> + {#each [[-0.375, 1], [-0.375, 0.8], [-0.3, 0.6], [-0.225, 0.4], [-0.15, 0.2], [-0.075, 0.1]] as item} + <div + class="line absolute left-0 h-1 w-full rounded-full{colorClass()}" + style="background-color: {customColor[0]};top: calc(50% - 2px);animation-duration: {0.9 / speed}s;animation-delay: {(0.9 / speed) * + item[0]}s;opacity: {item[1]};" + ></div> + {/each} +</div> + +<style> + .line { + animation: rotate ease-in-out infinite; + } + @keyframes rotate { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(180deg); + } + } +</style> diff --git a/packages/stdf/components/loading/loadings/oneColor/1_6.svelte b/packages/stdf/components/loading/loadings/oneColor/1_6.svelte index f7e6d9e5..131b14fa 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_6.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_6.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_7.svelte b/packages/stdf/components/loading/loadings/oneColor/1_7.svelte index d6b58f06..eef94384 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_7.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_7.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_8.svelte b/packages/stdf/components/loading/loadings/oneColor/1_8.svelte index ec3d5d6e..92487ebb 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_8.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_8.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/1_9.svelte b/packages/stdf/components/loading/loadings/oneColor/1_9.svelte index a263c1f3..8622668c 100644 --- a/packages/stdf/components/loading/loadings/oneColor/1_9.svelte +++ b/packages/stdf/components/loading/loadings/oneColor/1_9.svelte @@ -2,8 +2,8 @@ export let theme = false; export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const colorClass = () => { if (inverse) { diff --git a/packages/stdf/components/loading/loadings/oneColor/index.js b/packages/stdf/components/loading/loadings/oneColor/index.js index cdd08d2a..e1d40c92 100644 --- a/packages/stdf/components/loading/loadings/oneColor/index.js +++ b/packages/stdf/components/loading/loadings/oneColor/index.js @@ -20,6 +20,38 @@ import Loading1_18 from './1_18.svelte'; import Loading1_19 from './1_19.svelte'; import Loading1_20 from './1_20.svelte'; import Loading1_21 from './1_21.svelte'; +import Loading1_22 from './1_22.svelte'; +import Loading1_23 from './1_23.svelte'; +import Loading1_24 from './1_24.svelte'; +import Loading1_25 from './1_25.svelte'; +import Loading1_26 from './1_26.svelte'; +import Loading1_27 from './1_27.svelte'; +import Loading1_28 from './1_28.svelte'; +import Loading1_29 from './1_29.svelte'; +import Loading1_30 from './1_30.svelte'; +import Loading1_31 from './1_31.svelte'; +import Loading1_32 from './1_32.svelte'; +import Loading1_33 from './1_33.svelte'; +import Loading1_34 from './1_34.svelte'; +import Loading1_35 from './1_35.svelte'; +import Loading1_36 from './1_36.svelte'; +import Loading1_37 from './1_37.svelte'; +import Loading1_38 from './1_38.svelte'; +import Loading1_39 from './1_39.svelte'; +import Loading1_40 from './1_40.svelte'; +import Loading1_41 from './1_41.svelte'; +import Loading1_42 from './1_42.svelte'; +import Loading1_43 from './1_43.svelte'; +import Loading1_44 from './1_44.svelte'; +import Loading1_45 from './1_45.svelte'; +import Loading1_46 from './1_46.svelte'; +import Loading1_47 from './1_47.svelte'; +import Loading1_48 from './1_48.svelte'; +import Loading1_49 from './1_49.svelte'; +import Loading1_50 from './1_50.svelte'; +import Loading1_51 from './1_51.svelte'; +import Loading1_52 from './1_52.svelte'; +import Loading1_53 from './1_53.svelte'; export { Loading1_0, @@ -44,4 +76,36 @@ export { Loading1_19, Loading1_20, Loading1_21, + Loading1_22, + Loading1_23, + Loading1_24, + Loading1_25, + Loading1_26, + Loading1_27, + Loading1_28, + Loading1_29, + Loading1_30, + Loading1_31, + Loading1_32, + Loading1_33, + Loading1_34, + Loading1_35, + Loading1_36, + Loading1_37, + Loading1_38, + Loading1_39, + Loading1_40, + Loading1_41, + Loading1_42, + Loading1_43, + Loading1_44, + Loading1_45, + Loading1_46, + Loading1_47, + Loading1_48, + Loading1_49, + Loading1_50, + Loading1_51, + Loading1_52, + Loading1_53, }; diff --git a/packages/stdf/components/loading/loadings/twoColor/2_0.svelte b/packages/stdf/components/loading/loadings/twoColor/2_0.svelte index ec5e1659..6d5d0fde 100644 --- a/packages/stdf/components/loading/loadings/twoColor/2_0.svelte +++ b/packages/stdf/components/loading/loadings/twoColor/2_0.svelte @@ -1,8 +1,8 @@ <script> export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const outerBorderClass = () => { return inverse ? ' border-white/10 dark:border-black/10' : ' border-black/10 dark:border-white/10'; diff --git a/packages/stdf/components/loading/loadings/twoColor/2_1.svelte b/packages/stdf/components/loading/loadings/twoColor/2_1.svelte index ec22498d..c153894a 100644 --- a/packages/stdf/components/loading/loadings/twoColor/2_1.svelte +++ b/packages/stdf/components/loading/loadings/twoColor/2_1.svelte @@ -1,8 +1,8 @@ <script> export let inverse = false; export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; const outerBorderClass = () => { return inverse ? ' border-white/10 dark:border-black/10' : ' border-black/10 dark:border-white/10'; diff --git a/packages/stdf/components/loading/loadings/twoColor/2_2.svelte b/packages/stdf/components/loading/loadings/twoColor/2_2.svelte index 07cb999e..4e2df645 100644 --- a/packages/stdf/components/loading/loadings/twoColor/2_2.svelte +++ b/packages/stdf/components/loading/loadings/twoColor/2_2.svelte @@ -1,7 +1,7 @@ <script> export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; export let inverse = false; const borderClass = () => { diff --git a/packages/stdf/components/loading/loadings/twoColor/2_3.svelte b/packages/stdf/components/loading/loadings/twoColor/2_3.svelte index 0164ee58..74d8b9d4 100644 --- a/packages/stdf/components/loading/loadings/twoColor/2_3.svelte +++ b/packages/stdf/components/loading/loadings/twoColor/2_3.svelte @@ -1,7 +1,7 @@ <script> export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; export let inverse = false; const bgClass = () => { diff --git a/packages/stdf/components/loading/loadings/twoColor/2_4.svelte b/packages/stdf/components/loading/loadings/twoColor/2_4.svelte index 43101093..cb894dca 100644 --- a/packages/stdf/components/loading/loadings/twoColor/2_4.svelte +++ b/packages/stdf/components/loading/loadings/twoColor/2_4.svelte @@ -1,7 +1,7 @@ <script> export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; export let inverse = false; const bgClass = () => { diff --git a/packages/stdf/components/loading/loadings/twoColor/2_5.svelte b/packages/stdf/components/loading/loadings/twoColor/2_5.svelte index f4bd5ae3..ed40cf3a 100644 --- a/packages/stdf/components/loading/loadings/twoColor/2_5.svelte +++ b/packages/stdf/components/loading/loadings/twoColor/2_5.svelte @@ -1,7 +1,7 @@ <script> export let size = 'w-8 h-8'; - export let customColor = []; //自定义颜色 - export let speed = 1; //速度系数,基础为1,数值越大,速度越快 + export let customColor = []; + export let speed = 1; export let inverse = false; const bgClass = () => { diff --git a/packages/stdf/package.json b/packages/stdf/package.json index 962c1aa6..99958c64 100644 --- a/packages/stdf/package.json +++ b/packages/stdf/package.json @@ -1,6 +1,6 @@ { "name": "stdf", - "version": "0.4.5", + "version": "0.4.6", "description": "Mobile web component library based on Svelte and Tailwind", "main": "./components/index.js", "svelte": "./components/index.js",