[stdf]Add Loading component type and update version to 0.4.6

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"
 	}
 }

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>

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), 感谢他们的分享。

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.

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）。

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).

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)。

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).

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'}

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

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`}>

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;">

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;">

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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;
 

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;
 

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) {

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;
 

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;
 

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>

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>

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>

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>

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>

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>

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>

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>

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) {

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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) {

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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) {

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>

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>

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>

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>

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) {

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) {

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) {

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) {

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,
 };

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';

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';

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 = () => {

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 = () => {

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 = () => {

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 = () => {

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",