add 8 Loading type

README.md

@@ -3,7 +3,9 @@
   <img src="https://stdf.design/assets/images/stdf_512px.png" alt="logo" width="100" height="auto" />
   <h1>S T D F</h1>
 
-[![npm (tag)](https://img.shields.io/npm/v/stdf)](https://www.npmjs.com/package/stdf) [![npm](https://img.shields.io/npm/dw/stdf)](https://www.npmjs.com/package/stdf)
+[![npm (tag)](https://img.shields.io/npm/v/stdf)](https://www.npmjs.com/package/stdf) [![npm](https://img.shields.io/npm/dw/stdf)](https://www.npmjs.com/package/stdf) <a href="https://github.com/dufu1991/stdf"><img alt="GitHub" src="https://badgen.net/github/stars/dufu1991/stdf"/></a> <a href="https://github.com/dufu1991/stdf/blob/main/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/dufu1991/stdf"/></a>
+
+</p>
 
   <h4>
     <a href="https://github.com/dufu1991/stdf/blob/main/README_en.md" target="_blank">English Doc</a>
@@ -29,7 +31,7 @@
 -   📖 提供丰富的中英文文档和组件示例；
 -   🌍 支持国际化，已内置 60+ 种语言包；
 -   🫰 交互友好，动画参数可配，可自定义主题；
--   🤝 支持 Tailwind 类库，如 Windi CSS、UnoCSS 等。
+-   🤝 支持 Tailwind 类库，如 Windi CSS、UnoCSS 等；
 -   🫡 无三方依赖，无需担心三方库版本与安全问题。
 
 # 快速上手

README_en.md

@@ -3,7 +3,7 @@
   <img src="https://stdf.design/assets/images/stdf_512px.png" alt="logo" width="100" height="auto" />
   <h1>S T D F</h1>
 
-[![npm (tag)](https://img.shields.io/npm/v/stdf)](https://www.npmjs.com/package/stdf) [![npm](https://img.shields.io/npm/dw/stdf)](https://www.npmjs.com/package/stdf)
+[![npm (tag)](https://img.shields.io/npm/v/stdf)](https://www.npmjs.com/package/stdf) [![npm](https://img.shields.io/npm/dw/stdf)](https://www.npmjs.com/package/stdf) <a href="https://github.com/dufu1991/stdf"><img alt="GitHub" src="https://badgen.net/github/stars/dufu1991/stdf"/></a> <a href="https://github.com/dufu1991/stdf/blob/main/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/dufu1991/stdf"/></a>
 
   <h4>
     <a href="https://github.com/dufu1991/stdf/blob/main/README.md" target="_blank">中文文档</a>
@@ -29,7 +29,7 @@ Mobile web component library based on [Svelte](https://svelte.dev) and [Tailwind
 -   📖 Provides extensive Chinese and English documentation and component examples;
 -   🌍 Supports internationalization, with 60+ built-in language packages;
 -   🫰 User-friendly interaction, animation parameters can be configured, and custom themes are supported;
--   🤝 Supports Tailwind libraries such as Windi CSS and UnoCSS.
+-   🤝 Supports Tailwind libraries such as Windi CSS and UnoCSS;
 -   🫡 No three -party dependence, no need to worry about the three -party library version and security issues.
 
 # Getting Started

components/README.md

@@ -3,7 +3,9 @@
   <img src="https://stdf.design/assets/images/stdf_512px.png" alt="logo" width="100" height="auto" />
   <h1>S T D F</h1>
 
-[![npm (tag)](https://img.shields.io/npm/v/stdf)](https://www.npmjs.com/package/stdf) [![npm](https://img.shields.io/npm/dw/stdf)](https://www.npmjs.com/package/stdf)
+[![npm (tag)](https://img.shields.io/npm/v/stdf)](https://www.npmjs.com/package/stdf) [![npm](https://img.shields.io/npm/dw/stdf)](https://www.npmjs.com/package/stdf) <a href="https://github.com/dufu1991/stdf"><img alt="GitHub" src="https://badgen.net/github/stars/dufu1991/stdf"/></a> <a href="https://github.com/dufu1991/stdf/blob/main/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/dufu1991/stdf"/></a>
+
+</p>
 
   <h4>
     <a href="https://github.com/dufu1991/stdf/blob/main/README_en.md" target="_blank">English Doc</a>
@@ -29,7 +31,8 @@
 -   📖 提供丰富的中英文文档和组件示例；
 -   🌍 支持国际化，已内置 60+ 种语言包；
 -   🫰 交互友好，动画参数可配，可自定义主题；
--   🤝 支持 Tailwind 类库，如 Windi CSS、UnoCSS 等。
+-   🤝 支持 Tailwind 类库，如 Windi CSS、UnoCSS 等；
+-   🫡 无三方依赖，无需担心三方库版本与安全问题。
 
 # 快速上手
 

components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stdf",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "description": "Mobile Web component library based on Svelte and Tailwind",
     "main": "index.js",
     "scripts": {

components/src/loading/Loading.svelte

@@ -19,8 +19,12 @@
         Loading1_15,
         Loading1_16,
         Loading1_17,
+        Loading1_18,
+        Loading1_19,
+        Loading1_20,
+        Loading1_21,
     } from './loadings/oneColor';
-    import { Loading2_0, Loading2_1 } from './loadings/twoColor';
+    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';
 
     // 编号
@@ -189,12 +193,23 @@
         <Loading1_16 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
     {:else if type === '1_17'}
         <Loading1_17 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+    {:else if type === '1_18'}
+        <Loading1_18 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+    {:else if type === '1_19'}
+        <Loading1_19 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+    {:else if type === '1_20'}
+        <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 />
 
         <!--twoColor-->
     {:else if type === '2_0'}
         <Loading2_0 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '2_1'}
-        <Loading2_1 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+    {:else if type === '2_1'}<Loading2_1 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+    {:else if type === '2_2'}<Loading2_2 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+    {:else if type === '2_3'}<Loading2_3 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+    {:else if type === '2_4'}<Loading2_4 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+    {:else if type === '2_5'}<Loading2_5 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
 
         <!--fourColor-->
     {:else if type === '4_0'}

components/src/loading/loadings/oneColor/1_18.svelte

@@ -0,0 +1,92 @@
+<script>
+    export let size = 'w-8 h-8';
+    export let customColor = []; //自定义颜色
+    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+    export let theme = false;
+    export let inverse = false;
+
+    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 rotate-45`}>
+    <div
+        class="w-1/3 h-1/3 absolute left-0 top-0 shape1 {colorClass()}"
+        style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+    />
+    <div
+        class="w-1/3 h-1/3 absolute right-0 top-0 shape2 {colorClass()}"
+        style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+    />
+    <div
+        class="w-1/3 h-1/3 absolute right-0 bottom-0 shape3 {colorClass()}"
+        style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+    />
+    <div
+        class="w-1/3 h-1/3 absolute left-0 bottom-0 shape4 {colorClass()}"
+        style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+    />
+</div>
+
+<style>
+    .shape1 {
+        animation: animationShape1 0.5s ease infinite alternate;
+    }
+
+    .shape2 {
+        animation: animationShape2 0.5s ease infinite alternate;
+    }
+
+    .shape3 {
+        animation: animationShape3 0.5s ease infinite alternate;
+    }
+
+    .shape4 {
+        animation: animationShape4 0.5s ease infinite alternate;
+    }
+
+    @keyframes animationShape1 {
+        0% {
+            transform: translate(0, 0);
+        }
+
+        100% {
+            transform: translate(16px, 16px);
+        }
+    }
+
+    @keyframes animationShape2 {
+        0% {
+            transform: translate(0, 0);
+        }
+
+        100% {
+            transform: translate(-16px, 16px);
+        }
+    }
+
+    @keyframes animationShape3 {
+        0% {
+            transform: translate(0, 0);
+        }
+
+        100% {
+            transform: translate(-16px, -16px);
+        }
+    }
+
+    @keyframes animationShape4 {
+        0% {
+            transform: translate(0, 0);
+        }
+
+        100% {
+            transform: translate(16px, -16px);
+        }
+    }
+</style>

components/src/loading/loadings/oneColor/1_19.svelte

@@ -0,0 +1,109 @@
+<script>
+    export let size = 'w-8 h-8';
+    export let customColor = []; //自定义颜色
+    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+    export let theme = false;
+    export let inverse = false;
+
+    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 loading`} style="animation-duration: {1.6 / speed}s;-webkit-animation-duration: {1.6 / speed}s;">
+    <div
+        class="w-1/3 h-1/3 rounded-full absolute shape1 {colorClass()}"
+        style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+    />
+    <div
+        class="w-1/3 h-1/3 rounded-full absolute shape2 {colorClass()}"
+        style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+    />
+    <div
+        class="w-1/3 h-1/3 rounded-full absolute shape3 {colorClass()}"
+        style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+    />
+    <div
+        class="w-1/3 h-1/3 rounded-full absolute shape4 {colorClass()}"
+        style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+    />
+</div>
+
+<style>
+    .loading {
+        animation: animationContainer 1.6s ease infinite;
+    }
+    .shape1 {
+        animation: animationShape1 0.8s ease infinite alternate;
+    }
+
+    .shape2 {
+        animation: animationShape2 0.8s ease infinite alternate;
+    }
+
+    .shape3 {
+        animation: animationShape3 0.8s ease infinite alternate;
+    }
+
+    .shape4 {
+        animation: animationShape4 0.8s ease infinite alternate;
+    }
+
+    @keyframes animationContainer {
+        0% {
+            transform: rotate(0);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes animationShape1 {
+        0% {
+            top: 0;
+            left: 0;
+        }
+        100% {
+            top: 66.6666666667%;
+            left: 66.6666666667%;
+        }
+    }
+
+    @keyframes animationShape2 {
+        0% {
+            top: 0;
+            left: 66.6666666667%;
+        }
+        100% {
+            top: 66.6666666667%;
+            left: 0;
+        }
+    }
+
+    @keyframes animationShape3 {
+        0% {
+            top: 66.6666666667%;
+            left: 66.6666666667%;
+        }
+        100% {
+            top: 0;
+            left: 0;
+        }
+    }
+
+    @keyframes animationShape4 {
+        0% {
+            top: 66.6666666667%;
+            left: 0;
+        }
+        100% {
+            top: 0;
+            left: 66.6666666667%;
+        }
+    }
+</style>

components/src/loading/loadings/oneColor/1_20.svelte

@@ -0,0 +1,42 @@
+<script>
+    export let size = 'w-8 h-8';
+    export let customColor = []; //自定义颜色
+    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+    export let theme = false;
+    export let inverse = false;
+
+    const colorClass = () => {
+        if (inverse) {
+            return theme
+                ? ' border-opacity-5 dark:border-opacity-5 border-dark border-l-dark/[1] dark:border-primary dark:border-l-primary/[1] border-r-dark/[1] dark:border-r-primary/[1]'
+                : ' border-opacity-5 dark:border-opacity-5 border-white border-l-white/[1] dark:border-black dark:border-l-black/[1] border-r-white/[1] dark:border-r-black/[1]';
+        } else {
+            return theme
+                ? ' border-opacity-5 dark:border-opacity-5 border-primary dark:border-dark border-l-primary/[1] dark:border-l-dark/[1] border-r-primary/[1] dark:border-r-dark/[1]'
+                : ' border-opacity-5 dark:border-opacity-5 border-black dark:border-white border-l-black/[1] dark:border-l-white/[1] border-r-black/[1] dark:border-r-white/[1]';
+        }
+    };
+</script>
+
+<div
+    class={`${size} m-auto border-4 rounded-full loading ${colorClass()}`}
+    style={`border-color: ${customColor[0] + '0D'} ${customColor[0] + 'FF'} ${customColor[0] + '0D'} ${
+        customColor[0] + 'FF'
+    };animation-duration: ${2 / speed}s;-webkit-animation-duration: ${2 / speed}s;`}
+/>
+
+<style>
+    .loading {
+        animation: loading-animation 2s ease-in-out infinite alternate;
+    }
+
+    @keyframes loading-animation {
+        from {
+            transform: rotate(0deg);
+        }
+
+        to {
+            transform: rotate(720deg);
+        }
+    }
+</style>

components/src/loading/loadings/oneColor/1_21.svelte

@@ -0,0 +1,108 @@
+<script>
+    export let size = 'w-8 h-8';
+    export let customColor = []; //自定义颜色
+    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+    export let theme = false;
+    export let inverse = false;
+
+    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 loading`} style="animation-duration: {1.2 / speed}s;-webkit-animation-duration: {1.2 / speed}s;">
+    <div
+        class="w-1/2 h-1/2 rounded-tl-full absolute shape1 {colorClass()}"
+        style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+    />
+    <div
+        class="w-1/2 h-1/2 rounded-tr-full absolute shape2 {colorClass()}"
+        style="background: {customColor[0] };animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+    />
+    <div
+        class="w-1/2 h-1/2 rounded-br-full absolute shape3 {colorClass()}"
+        style="background: {customColor[0] };animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+    />
+    <div
+        class="w-1/2 h-1/2 rounded-bl-full absolute shape4 {colorClass()}"
+        style="background: {customColor[0] };animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+    />
+</div>
+
+<style>
+    .loading {
+        animation: animationContainer 1.2s ease infinite;
+    }
+    .shape1 {
+        animation: animationShape1 0.6s ease infinite alternate;
+    }
+
+    .shape2 {
+        animation: animationShape2 0.6s ease infinite alternate;
+    }
+
+    .shape3 {
+        animation: animationShape3 0.6s ease infinite alternate;
+    }
+
+    .shape4 {
+        animation: animationShape4 0.6s ease infinite alternate;
+    }
+
+    @keyframes animationContainer {
+        0% {
+            transform: rotate(0);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+    @keyframes animationShape1 {
+        0% {
+            top: 0;
+            left: 0;
+        }
+        100% {
+            top: -10%;
+            left: -10%;
+        }
+    }
+
+    @keyframes animationShape2 {
+        0% {
+            top: 0;
+            left: 50%;
+        }
+        100% {
+            top: -10%;
+            left: 60%;
+        }
+    }
+
+    @keyframes animationShape3 {
+        0% {
+            top: 50%;
+            left: 50%;
+        }
+        100% {
+            top: 60%;
+            left: 60%;
+        }
+    }
+
+    @keyframes animationShape4 {
+        0% {
+            top: 50%;
+            left: 0;
+        }
+        100% {
+            top: 60%;
+            left: -10%;
+        }
+    }
+</style>

components/src/loading/loadings/oneColor/index.js

@@ -16,8 +16,32 @@ import Loading1_14 from './1_14.svelte';
 import Loading1_15 from './1_15.svelte';
 import Loading1_16 from './1_16.svelte';
 import Loading1_17 from './1_17.svelte';
+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';
 
 export {
-    Loading1_0, Loading1_1, Loading1_2, Loading1_3, Loading1_4, Loading1_5, Loading1_6, Loading1_7, Loading1_8, Loading1_9, Loading1_10, Loading1_11,
-    Loading1_12, Loading1_13, Loading1_14, Loading1_15, Loading1_16, Loading1_17,
-};
+    Loading1_0,
+    Loading1_1,
+    Loading1_2,
+    Loading1_3,
+    Loading1_4,
+    Loading1_5,
+    Loading1_6,
+    Loading1_7,
+    Loading1_8,
+    Loading1_9,
+    Loading1_10,
+    Loading1_11,
+    Loading1_12,
+    Loading1_13,
+    Loading1_14,
+    Loading1_15,
+    Loading1_16,
+    Loading1_17,
+    Loading1_18,
+    Loading1_19,
+    Loading1_20,
+    Loading1_21,
+};

components/src/loading/loadings/twoColor/2_2.svelte

@@ -0,0 +1,35 @@
+<script>
+    export let size = 'w-8 h-8';
+    export let customColor = []; //自定义颜色
+    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+    export let inverse = false;
+
+    const borderClass = () => {
+        return inverse
+            ? 'border-white/5 dark:border-black/5 border-l-dark dark:border-l-primary border-r-dark dark:border-r-primary'
+            : 'border-black/5 dark:border-white/5 border-l-primary dark:border-l-dark border-r-primary dark:border-r-dark';
+    };
+</script>
+
+<div
+    class={`${size} m-auto border-4 rounded-full loading ${borderClass()}`}
+    style={`border-color: ${customColor[0] || (inverse ? '' : '')} ${customColor[1] || (inverse ? '' : '')} ${
+        customColor[0] || (inverse ? '' : '')
+    } ${customColor[1] || (inverse ? '' : '')};animation-duration: ${2 / speed}s;-webkit-animation-duration: ${2 / speed}s;`}
+/>
+
+<style>
+    .loading {
+        animation: loading-animation 2s ease-in-out infinite alternate;
+    }
+
+    @keyframes loading-animation {
+        from {
+            transform: rotate(0deg);
+        }
+
+        to {
+            transform: rotate(720deg);
+        }
+    }
+</style>

components/src/loading/loadings/twoColor/2_3.svelte

@@ -0,0 +1,90 @@
+<script>
+    export let size = 'w-8 h-8';
+    export let customColor = []; //自定义颜色
+    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+    export let inverse = false;
+
+    const bgClass = () => {
+        return inverse ? 'bg-dark dark:bg-primary' : 'bg-primary dark:bg-dark';
+    };
+    const bgClass2 = () => {
+        return inverse ? 'bg-white/50 dark:bg-black/50' : 'bg-black/50 dark:bg-white/50';
+    };
+</script>
+
+<div class={`${size} m-auto relative rotate-45`}>
+    <div
+        class="w-1/3 h-1/3 absolute left-0 top-0 shape1 {bgClass()}"
+        style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+    />
+    <div
+        class="w-1/3 h-1/3 absolute right-0 top-0 shape2 {bgClass2()}"
+        style="background: {customColor[1]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+    />
+    <div
+        class="w-1/3 h-1/3 absolute right-0 bottom-0 shape3 {bgClass()}"
+        style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+    />
+    <div
+        class="w-1/3 h-1/3 absolute left-0 bottom-0 shape4 {bgClass2()}"
+        style="background: {customColor[1]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+    />
+</div>
+
+<style>
+    .shape1 {
+        animation: animationShape1 0.5s ease infinite alternate;
+    }
+
+    .shape2 {
+        animation: animationShape2 0.5s ease infinite alternate;
+    }
+
+    .shape3 {
+        animation: animationShape3 0.5s ease infinite alternate;
+    }
+
+    .shape4 {
+        animation: animationShape4 0.5s ease infinite alternate;
+    }
+
+    @keyframes animationShape1 {
+        0% {
+            transform: translate(0, 0);
+        }
+
+        100% {
+            transform: translate(16px, 16px);
+        }
+    }
+
+    @keyframes animationShape2 {
+        0% {
+            transform: translate(0, 0);
+        }
+
+        100% {
+            transform: translate(-16px, 16px);
+        }
+    }
+
+    @keyframes animationShape3 {
+        0% {
+            transform: translate(0, 0);
+        }
+
+        100% {
+            transform: translate(-16px, -16px);
+        }
+    }
+
+    @keyframes animationShape4 {
+        0% {
+            transform: translate(0, 0);
+        }
+
+        100% {
+            transform: translate(16px, -16px);
+        }
+    }
+</style>

components/src/loading/loadings/twoColor/2_4.svelte

@@ -0,0 +1,107 @@
+<script>
+    export let size = 'w-8 h-8';
+    export let customColor = []; //自定义颜色
+    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+    export let inverse = false;
+
+    const bgClass = () => {
+        return inverse ? 'bg-dark dark:bg-primary' : 'bg-primary dark:bg-dark';
+    };
+    const bgClass2 = () => {
+        return inverse ? 'bg-white/50 dark:bg-black/50' : 'bg-black/50 dark:bg-white/50';
+    };
+</script>
+
+<div class={`${size} m-auto relative loading`} style="animation-duration: {1.6 / speed}s;-webkit-animation-duration: {1.6 / speed}s;">
+    <div
+        class="w-1/3 h-1/3 rounded-full absolute shape1 {bgClass()}"
+        style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+    />
+    <div
+        class="w-1/3 h-1/3 rounded-full absolute shape2 {bgClass2()}"
+        style="background: {customColor[1]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+    />
+    <div
+        class="w-1/3 h-1/3 rounded-full absolute shape3 {bgClass()}"
+        style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+    />
+    <div
+        class="w-1/3 h-1/3 rounded-full absolute shape4 {bgClass2()}"
+        style="background: {customColor[1]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+    />
+</div>
+
+<style>
+    .loading {
+        animation: animationContainer 1.6s ease infinite;
+    }
+    .shape1 {
+        animation: animationShape1 0.8s ease infinite alternate;
+    }
+
+    .shape2 {
+        animation: animationShape2 0.8s ease infinite alternate;
+    }
+
+    .shape3 {
+        animation: animationShape3 0.8s ease infinite alternate;
+    }
+
+    .shape4 {
+        animation: animationShape4 0.8s ease infinite alternate;
+    }
+
+    @keyframes animationContainer {
+        0% {
+            transform: rotate(0);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes animationShape1 {
+        0% {
+            top: 0;
+            left: 0;
+        }
+        100% {
+            top: 66.6666666667%;
+            left: 66.6666666667%;
+        }
+    }
+
+    @keyframes animationShape2 {
+        0% {
+            top: 0;
+            left: 66.6666666667%;
+        }
+        100% {
+            top: 66.6666666667%;
+            left: 0;
+        }
+    }
+
+    @keyframes animationShape3 {
+        0% {
+            top: 66.6666666667%;
+            left: 66.6666666667%;
+        }
+        100% {
+            top: 0;
+            left: 0;
+        }
+    }
+
+    @keyframes animationShape4 {
+        0% {
+            top: 66.6666666667%;
+            left: 0;
+        }
+        100% {
+            top: 0;
+            left: 66.6666666667%;
+        }
+    }
+</style>

components/src/loading/loadings/twoColor/2_5.svelte

@@ -0,0 +1,106 @@
+<script>
+    export let size = 'w-8 h-8';
+    export let customColor = []; //自定义颜色
+    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+    export let inverse = false;
+
+    const bgClass = () => {
+        return inverse ? 'bg-dark dark:bg-primary' : 'bg-primary dark:bg-dark';
+    };
+    const bgClass2 = () => {
+        return inverse ? 'bg-white/50 dark:bg-black/50' : 'bg-black/50 dark:bg-white/50';
+    };
+</script>
+
+<div class={`${size} m-auto relative loading`} style="animation-duration: {1.2 / speed}s;-webkit-animation-duration: {1.2 / speed}s;">
+    <div
+        class="w-1/2 h-1/2 rounded-tl-full absolute shape1 {bgClass()}"
+        style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+    />
+    <div
+        class="w-1/2 h-1/2 rounded-tr-full absolute shape2 {bgClass2()}"
+        style="background: {customColor[1]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+    />
+    <div
+        class="w-1/2 h-1/2 rounded-br-full absolute shape3 {bgClass()}"
+        style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+    />
+    <div
+        class="w-1/2 h-1/2 rounded-bl-full absolute shape4 {bgClass2()}"
+        style="background: {customColor[1]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+    />
+</div>
+
+<style>
+    .loading {
+        animation: animationContainer 1.2s ease infinite;
+    }
+    .shape1 {
+        animation: animationShape1 0.6s ease infinite alternate;
+    }
+
+    .shape2 {
+        animation: animationShape2 0.6s ease infinite alternate;
+    }
+
+    .shape3 {
+        animation: animationShape3 0.6s ease infinite alternate;
+    }
+
+    .shape4 {
+        animation: animationShape4 0.6s ease infinite alternate;
+    }
+
+    @keyframes animationContainer {
+        0% {
+            transform: rotate(0);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+    @keyframes animationShape1 {
+        0% {
+            top: 0;
+            left: 0;
+        }
+        100% {
+            top: -10%;
+            left: -10%;
+        }
+    }
+
+    @keyframes animationShape2 {
+        0% {
+            top: 0;
+            left: 50%;
+        }
+        100% {
+            top: -10%;
+            left: 60%;
+        }
+    }
+
+    @keyframes animationShape3 {
+        0% {
+            top: 50%;
+            left: 50%;
+        }
+        100% {
+            top: 60%;
+            left: 60%;
+        }
+    }
+
+    @keyframes animationShape4 {
+        0% {
+            top: 50%;
+            left: 0;
+        }
+        100% {
+            top: 60%;
+            left: -10%;
+        }
+    }
+</style>

components/src/loading/loadings/twoColor/index.js

@@ -1,4 +1,8 @@
 import Loading2_0 from './2_0.svelte';
 import Loading2_1 from './2_1.svelte';
+import Loading2_2 from './2_2.svelte';
+import Loading2_3 from './2_3.svelte';
+import Loading2_4 from './2_4.svelte';
+import Loading2_5 from './2_5.svelte';
 
-export {Loading2_0, Loading2_1};
+export { Loading2_0, Loading2_1, Loading2_2, Loading2_3, Loading2_4, Loading2_5 };

doc/components/loading/version.md

@@ -0,0 +1,5 @@
+## 0.0.6
+
+-   [!tag|A|0|]新增 8 种 Loading（1_18、1_19、1_20、1_21、2_2、2_3、2_4、2_5）。
+
+<font size=1>2023-05-08</font> -->

doc/components/loading/version_en.md

@@ -0,0 +1,5 @@
+## 0.0.6
+
+-   [!tag|A|0|]Add 8 Loading (1_18、1_19、1_20、1_21、2_2、2_3、2_4、2_5).
+
+<font size=1>2023-05-08</font> -->

doc/guide/changelog.md

@@ -1,3 +1,7 @@
+## 0.0.6
+
+-   新增 Loading 类型。
+
 ## 0.0.1
 
 -   上线了。

doc/guide/changelog_en.md

@@ -1,3 +1,7 @@
+## 0.0.6
+
+-   Add Loading type.
+
 ## 0.0.1
 
 -   Online now.