[stdf]Update Loading compoent, demo and documents.

demo/src/routes/en_US/loading/+page.svelte

@@ -19,11 +19,11 @@
 	const labels = [{ text: 'One color' }, { text: 'Two color' }, { text: 'Four color' }, { text: 'Other' }];
 
 	const speedBtns = [0.5, 1, 2];
-	let speed = 1;
+	let speed = $state(1);
 </script>
 
 <div class="py-4">
-	<Tabs tab={{ labels, mx: '4' }}>
+	<Tabs tab={{ labels }}>
 		<TabContent>
 			<div class="py-4">
 				<div class="flex text-center font-bold text-sm">
@@ -32,22 +32,21 @@
 					{/each}
 				</div>
 				<div class="grid grid-cols-5">
-					<!-- 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-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'1_' + i} bind:speed />
 							</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-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'1_' + i} theme bind:speed />
 							</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-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'1_' + i} theme customColor={randomColorArr(1)} bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'1_' + i}</div>
@@ -55,7 +54,7 @@
 						<div
 							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-darkBlack dark:bg-darkWhite text-white dark:text-black"
 						>
-							<div class="w-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'1_' + i} inverse bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'1_' + i}</div>
@@ -63,7 +62,7 @@
 						<div
 							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-darkBlack dark:bg-darkWhite text-white dark:text-black"
 						>
-							<div class="w-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'1_' + i} theme inverse bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'1_' + i}</div>
@@ -81,16 +80,15 @@
 					{/each}
 				</div>
 				<div class="grid grid-cols-3">
-					<!-- eslint-disable-next-line no-unused-vars -->
 					{#each arr2 as item, i}
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'2_' + i} bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'2_' + i}</div>
 						</div>
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'2_' + i} customColor={randomColorArr(2)} bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'2_' + i}</div>
@@ -98,7 +96,7 @@
 						<div
 							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-darkBlack dark:bg-darkWhite text-white dark:text-black"
 						>
-							<div class="w-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'2_' + i} inverse bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'2_' + i}</div>
@@ -116,16 +114,15 @@
 					{/each}
 				</div>
 				<div class="grid grid-cols-4">
-					<!-- eslint-disable-next-line no-unused-vars -->
 					{#each arr4 as item, i}
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'4_' + i} bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'4_' + i}</div>
 						</div>
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'4_' + i} customColor={randomColorArr(4)} bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'4_' + i}</div>
@@ -136,7 +133,7 @@
 			<div class="text-xs p-4">Continually updated...</div>
 		</TabContent>
 		<TabContent>
-			<div class="py-4" />
+			<div class="py-4"></div>
 			<div class="text-xs p-4">Continually updated...</div>
 		</TabContent>
 	</Tabs>
@@ -145,7 +142,7 @@
 <div class="sticky bottom-0 left-0 w-full flex gap-3 justify-between px-2 z-10 bg-white/60 dark:bg-black/60 backdrop-blur">
 	{#each speedBtns as item}
 		<div class="flex-1">
-			<Button fill={speed === item ? 'base' : 'lineTheme'} size="full" injClass="text-xs px-2" on:click={() => (speed = item)}>
+			<Button fill={speed === item ? 'base' : 'lineTheme'} size="full" injClass="text-xs px-2" onclick={() => (speed = item)}>
 				{item}x speed
 			</Button>
 		</div>

demo/src/routes/zh_CN/loading/+page.svelte

@@ -19,11 +19,11 @@
 	const labels = [{ text: '单色' }, { text: '双色' }, { text: '四色' }, { text: '其他' }];
 
 	const speedBtns = [0.5, 1, 2];
-	let speed = 1;
+	let speed = $state(1);
 </script>
 
 <div class="py-4">
-	<Tabs tab={{ labels, mx: '4' }}>
+	<Tabs tab={{ labels }}>
 		<TabContent>
 			<div class="py-4">
 				<div class="flex text-center font-bold text-sm">
@@ -32,22 +32,21 @@
 					{/each}
 				</div>
 				<div class="grid grid-cols-5">
-					<!-- 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-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'1_' + i} bind:speed />
 							</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-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'1_' + i} theme bind:speed />
 							</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-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'1_' + i} theme customColor={randomColorArr(1)} bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'1_' + i}</div>
@@ -55,7 +54,7 @@
 						<div
 							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-darkBlack dark:bg-darkWhite text-white dark:text-black"
 						>
-							<div class="w-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'1_' + i} inverse bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'1_' + i}</div>
@@ -63,7 +62,7 @@
 						<div
 							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-darkBlack dark:bg-darkWhite text-white dark:text-black"
 						>
-							<div class="w-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'1_' + i} theme inverse bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'1_' + i}</div>
@@ -81,16 +80,15 @@
 					{/each}
 				</div>
 				<div class="grid grid-cols-3">
-					<!-- eslint-disable-next-line no-unused-vars -->
 					{#each arr2 as item, i}
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'2_' + i} bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'2_' + i}</div>
 						</div>
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'2_' + i} customColor={randomColorArr(2)} bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'2_' + i}</div>
@@ -98,7 +96,7 @@
 						<div
 							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-darkBlack dark:bg-darkWhite text-white dark:text-black"
 						>
-							<div class="w-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'2_' + i} inverse bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'2_' + i}</div>
@@ -116,16 +114,15 @@
 					{/each}
 				</div>
 				<div class="grid grid-cols-4">
-					<!-- eslint-disable-next-line no-unused-vars -->
 					{#each arr4 as item, i}
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'4_' + i} bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'4_' + i}</div>
 						</div>
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[32px] h-[32px]">
+							<div class="w-8 h-8">
 								<Loading type={'4_' + i} customColor={randomColorArr(4)} bind:speed />
 							</div>
 							<div class="text-xs text-center mt-8">{'4_' + i}</div>
@@ -136,7 +133,7 @@
 			<div class="text-xs p-4">持续更新...</div>
 		</TabContent>
 		<TabContent>
-			<div class="py-4" />
+			<div class="py-4"></div>
 			<div class="text-xs p-4">持续更新...</div>
 		</TabContent>
 	</Tabs>
@@ -145,7 +142,7 @@
 <div class="sticky bottom-0 left-0 w-full flex gap-3 justify-between px-2 z-10 bg-white/60 dark:bg-black/60 backdrop-blur">
 	{#each speedBtns as item}
 		<div class="flex-1">
-			<Button fill={speed === item ? 'base' : 'lineTheme'} size="full" injClass="text-xs px-2" on:click={() => (speed = item)}>
+			<Button fill={speed === item ? 'base' : 'lineTheme'} size="full" injClass="text-xs px-2" onclick={() => (speed = item)}>
 				{item} 倍速
 			</Button>
 		</div>

doc/components/loading/api.md

@@ -1,12 +1,12 @@
 ## Loading Props
 
-| 属性          | 类型    | 默认值 | 可选值                                                                        | 必传 | 说明                               |
-| ------------- | ------- | ------ | ----------------------------------------------------------------------------- | ---- | ---------------------------------- |
-| type          | String  | '1_0'  | -                                                                             | N    | 类型编号。                         |
-| height        | String  | '8'    | '2'/'4'/'6'/'8'/'12'/'16'/'20'/'28'/'36'/'48'/'56'/'64'/'72'/'80'/'96'/'full' | N    | 容器高度。                         |
-| width         | String  | '8'    | '2'/'4'/'6'/'8'/'12'/'16'/'20'/'28'/'36'/'48'/'56'/'64'/'72'/'80'/'96'/'full' | N    | 容器宽度。                         |
-| theme         | Boolean | false  | true/false                                                                    | N    | 是否使用主题色，仅单色生效。       |
-| inverse       | Boolean | false  | true/false                                                                    | N    | 是否使用反差色，仅单色与双色生效。 |
-| customColor   | Array   | []     | -                                                                             | N    | 自定义颜色数组。                   |
-| lazyAnimation | Boolean | true   | true/false                                                                    | N    | 是否开启懒动画。                   |
-| speed         | Number  | 1      | -                                                                             | N    | 动画速度，基数为 1。               |
+| 名称          | 类型                                                                                           | 默认值  | 必传 | 说明                               |
+| ------------- | ---------------------------------------------------------------------------------------------- | ------- | ---- | ---------------------------------- |
+| type          | `string`                                                                                       | `'1_0'` | N    | 类型编号。                         |
+| height        | `'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'20'\|'28'\|'36'\|'48'\|'56'\|'64'\|'72'\|'80'\|'96'\|'full'` | `'8'`   | N    | 容器高度。                         |
+| width         | `'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'20'\|'28'\|'36'\|'48'\|'56'\|'64'\|'72'\|'80'\|'96'\|'full'` | `'8'`   | N    | 容器宽度。                         |
+| theme         | `boolean`                                                                                      | `false` | N    | 是否使用主题色，仅单色生效。       |
+| inverse       | `boolean`                                                                                      | `false` | N    | 是否使用反差色，仅单色与双色生效。 |
+| customColor   | `string[]`                                                                                     | `[]`    | N    | 自定义颜色数组。                   |
+| lazyAnimation | `boolean`                                                                                      | `true`  | N    | 是否开启懒动画。                   |
+| speed         | `number`                                                                                       | `1`     | N    | 动画速度，基数为 1。               |

doc/components/loading/api_en.md

@@ -1,12 +1,12 @@
 ## Loading Props
 
-| Property Name | Type    | Default Value | Optional Values                                                               | Required | Description                                                          |
-| ------------- | ------- | ------------- | ----------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------- |
-| type          | String  | '1_0'         | -                                                                             | No       | Type code.                                                           |
-| height        | String  | '8'           | '2'/'4'/'6'/'8'/'12'/'16'/'20'/'28'/'36'/'48'/'56'/'64'/'72'/'80'/'96'/'full' | No       | Container height.                                                    |
-| width         | String  | '8'           | '2'/'4'/'6'/'8'/'12'/'16'/'20'/'28'/'36'/'48'/'56'/'64'/'72'/'80'/'96'/'full' | No       | Container width.                                                     |
-| theme         | Boolean | false         | true/false                                                                    | No       | Whether to use theme color, single color only.                       |
-| inverse       | Boolean | false         | true/false                                                                    | No       | Whether to use inverse color, available in single and double colors. |
-| customColor   | Array   | []            | -                                                                             | No       | Custom color array.                                                  |
-| lazyAnimation | Boolean | true          | true/false                                                                    | No       | Whether to enable lazy animation.                                    |
-| speed         | Number  | 1             | -                                                                             | No       | Animation speed, based on 1.                                         |
+| Name          | Type                                                                                           | Default | Required | Description                                                     |
+| ------------- | ---------------------------------------------------------------------------------------------- | ------- | -------- | --------------------------------------------------------------- |
+| type          | `string`                                                                                       | `'1_0'` | N        | Type number.                                                    |
+| height        | `'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'20'\|'28'\|'36'\|'48'\|'56'\|'64'\|'72'\|'80'\|'96'\|'full'` | `'8'`   | N        | Container height.                                               |
+| width         | `'2'\|'4'\|'6'\|'8'\|'12'\|'16'\|'20'\|'28'\|'36'\|'48'\|'56'\|'64'\|'72'\|'80'\|'96'\|'full'` | `'8'`   | N        | Container width.                                                |
+| theme         | `boolean`                                                                                      | `false` | N        | Whether to use theme color, only works for monochrome.          |
+| inverse       | `boolean`                                                                                      | `false` | N        | Whether to use contrast color, only works for mono/dual colors. |
+| customColor   | `string[]`                                                                                     | `[]`    | N        | Custom color array.                                             |
+| lazyAnimation | `boolean`                                                                                      | `true`  | N        | Whether to enable lazy animation.                               |
+| speed         | `number`                                                                                       | `1`     | N        | Animation speed, base value is 1.                               |

doc/components/loading/guide.md

@@ -38,4 +38,4 @@ Loading 自带了一系列过渡动画，极端情况下，当页面同时有大
 
 ## 感谢
 
-部分动效灵感来自 [德育处主任](http://k21vin.gitee.io/front-end-data-visualization/#/native/pureCSS/loading) 与 [LDRS](https://uiball.com/ldrs), 感谢他们的分享。
+部分动效灵感来自 [德育处主任](https://gitee.com/k21vin/front-end-data-visualization/tree/master/src/views/Native/PureCSS/pages/Loading/components) 与 [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) and [LDRS](https://uiball.com/ldrs). Special thanks go to them.
+Some of the animation inspirations are from [德育处主任](https://gitee.com/k21vin/front-end-data-visualization/tree/master/src/views/Native/PureCSS/pages/Loading/components) and [LDRS](https://uiball.com/ldrs). Special thanks go to them.

packages/stdf/components/loading/loadings/fourColor/4_0.svelte

@@ -11,10 +11,9 @@
 </script>
 
 <div
-	class={`${size} m-auto border-4 rounded-full loading`}
-	style={`border-color: ${customColor[0] || '#DA1414'} ${customColor[1] || '#11BB8D'} ${customColor[2] || '#7356BF'} ${
-		customColor[3] || '#FFC043'
-	};animation-duration: ${2 / speed}s;-webkit-animation-duration: ${2 / speed}s;`}
+	class="{size} m-auto border-4 rounded-full loading"
+	style="border-color: {customColor[0] || '#DA1414'} {customColor[1] || '#11BB8D'} {customColor[2] || '#7356BF'} {customColor[3] ||
+		'#FFC043'};animation-duration: {2 / speed}s;-webkit-animation-duration: {2 / speed}s;"
 ></div>
 
 <style>

packages/stdf/components/loading/loadings/fourColor/4_1.svelte

@@ -10,7 +10,7 @@
 	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 </script>
 
-<div class={`${size} m-auto relative rotate-45`}>
+<div class="{size} m-auto relative rotate-45">
 	<div
 		class="w-1/3 h-1/3 absolute left-0 top-0 shape1"
 		style="background: {customColor[0] || '#DA1414'};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"

packages/stdf/components/loading/loadings/fourColor/4_2.svelte

@@ -10,7 +10,7 @@
 	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 </script>
 
-<div class={`${size} m-auto relative loading`} style="animation-duration: {1.6 / speed}s;-webkit-animation-duration: {1.6 / speed}s;">
+<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"
 		style="background: {customColor[0] || '#DA1414'};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"

packages/stdf/components/loading/loadings/fourColor/4_3.svelte

@@ -10,7 +10,7 @@
 	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
 </script>
 
-<div class={`${size} m-auto relative loading`} style="animation-duration: {1.2 / speed}s;-webkit-animation-duration: {1.2 / speed}s;">
+<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"
 		style="background: {customColor[0] || '#DA1414'};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"

packages/stdf/components/loading/loadings/oneColor/1_0.svelte

@@ -20,11 +20,11 @@
 	};
 </script>
 
-<div class={`${size} m-auto`}>
+<div class="{size} m-auto">
 	<svg
 		viewBox="0 0 24 24"
-		class={`animate-spin${colorClass()}`}
-		style={`color: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
+		class="animate-spin{colorClass()}"
+		style="color: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
 	>
 		<circle cx="12" cy="12" r="10" stroke-width="4" fill="none" class="opacity-5" stroke="currentColor" />
 		<circle

packages/stdf/components/loading/loadings/oneColor/1_1.svelte

@@ -21,8 +21,7 @@
 </script>
 
 <div
-	class={`${size} m-auto border-2${colorClass()} rounded-full border-t-transparent dark:border-t-transparent animate-spin`}
-	style={`border-color: ${customColor[0]};border-top-color:transparent;animation-duration: ${1 / speed}s;-webkit-animation-duration: ${
-		1 / speed
-	}s;`}
+	class="{size} m-auto border-2{colorClass()} rounded-full border-t-transparent dark:border-t-transparent animate-spin"
+	style="border-color: {customColor[0]};border-top-color:transparent;animation-duration: {1 / speed}s;-webkit-animation-duration: {1 /
+		speed}s;"
 ></div>

packages/stdf/components/loading/loadings/oneColor/1_10.svelte

@@ -20,10 +20,10 @@
 	};
 </script>
 
-<div class={`${size} m-auto flex justify-between items-center`}>
+<div class="{size} m-auto flex justify-between items-center">
 	{#each [0, 1, 2] as i}
 		<div
-			class={`${colorClass()} rounded-full w-2 h-2 loading`}
+			class="{colorClass()} rounded-full w-2 h-2 loading"
 			style="animation-delay: {i === 1 ? -0.3 : 0}s;background: {customColor[0]};animation-duration: {1 /
 				speed}s;-webkit-animation-duration: {1 / speed}s;"
 		></div>

packages/stdf/components/loading/loadings/oneColor/1_11.svelte

@@ -20,10 +20,10 @@
 	};
 </script>
 
-<div class={`${size} m-auto relative`}>
+<div class="{size} m-auto relative">
 	{#each [0, 1, 2, 3, 4] as i}
 		<div
-			class={`absolute -left-1/2 top-1/4${colorClass()} rounded-full w-4 h-4 opacity-60 loading`}
+			class="absolute -left-1/2 top-1/4{colorClass()} rounded-full w-4 h-4 opacity-60 loading"
 			style="animation-delay: {-0.5 * i}s, {-0.5 * (i + 1)}s;top:calc(5);background: {customColor[0]};animation-duration: {2.5 /
 				speed}s;-webkit-animation-duration: {2.5 / speed}s;"
 		></div>

packages/stdf/components/loading/loadings/oneColor/1_12.svelte

@@ -20,27 +20,27 @@
 	};
 </script>
 
-<div class={`${size} m-auto relative box-border loading`}>
+<div class="{size} m-auto relative box-border loading">
 	<div
-		class={`absolute${colorClass()} rounded-full ball`}
+		class="absolute{colorClass()} rounded-full ball"
 		style="background: {customColor[0]};animation-duration: {speed >= 1 ? 0.6 / speed : 0.6}s;-webkit-animation-duration: {speed >= 1
 			? 0.6 / speed
 			: 0.6}s;"
 	></div>
 	<div
-		class={`absolute top-0 right-0${colorClass()} steps step1`}
+		class="absolute top-0 right-0{colorClass()} steps step1"
 		style="background: {customColor[0]};animation-duration: {speed >= 1 ? 1.8 / speed : 1.8}s;-webkit-animation-duration: {speed >= 1
 			? 1.8 / speed
 			: 1.8}s;"
 	></div>
 	<div
-		class={`absolute top-0 right-0${colorClass()} steps step2`}
+		class="absolute top-0 right-0{colorClass()} steps step2"
 		style="background: {customColor[0]};animation-duration: {speed >= 1 ? 1.8 / speed : 1.8}s;-webkit-animation-duration: {speed >= 1
 			? 1.8 / speed
 			: 1.8}s;"
 	></div>
 	<div
-		class={`absolute top-0 right-0${colorClass()} steps step3`}
+		class="absolute top-0 right-0{colorClass()} steps step3"
 		style="background: {customColor[0]};animation-duration: {speed >= 1 ? 1.8 / speed : 1.8}s;-webkit-animation-duration: {speed >= 1
 			? 1.8 / speed
 			: 1.8}s;"

packages/stdf/components/loading/loadings/oneColor/1_13.svelte

@@ -20,13 +20,13 @@
 	};
 </script>
 
-<div class={`${size} m-auto relative box-border`}>
+<div class="{size} m-auto relative box-border">
 	<div
-		class={`absolute top-1/2 left-1/2 ${size} m-auto border-2 !border-r-transparent !border-l-transparent rounded-full${colorClass()} loading`}
+		class="absolute top-1/2 left-1/2 {size} m-auto border-2 !border-r-transparent !border-l-transparent rounded-full{colorClass()} loading"
 		style="border-color: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 / speed}s;"
 	></div>
 	<div
-		class={`absolute top-1/2 left-1/2 w-1/2 h-1/2 m-auto border-2 !border-t-transparent !border-b-transparent rounded-full${colorClass()} loading`}
+		class="absolute top-1/2 left-1/2 w-1/2 h-1/2 m-auto border-2 !border-t-transparent !border-b-transparent rounded-full{colorClass()} loading"
 		style="animation-direction: reverse;border-color: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 /
 			speed}s;"
 	></div>

packages/stdf/components/loading/loadings/oneColor/1_14.svelte

@@ -27,13 +27,13 @@
 	};
 </script>
 
-<div class={`${size} m-auto relative`}>
+<div class="{size} m-auto relative">
 	<div
-		class={`absolute w-full h-full border-2 !border-r-transparent !border-l-transparent rounded-full${borderClass()} loading1`}
+		class="absolute w-full h-full border-2 !border-r-transparent !border-l-transparent rounded-full{borderClass()} loading1"
 		style="border-color: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
 	></div>
 	<div
-		class={`absolute left-1/4 top-1/4 w-1/2 h-1/2 rounded-full${colorClass()} loading2`}
+		class="absolute left-1/4 top-1/4 w-1/2 h-1/2 rounded-full{colorClass()} loading2"
 		style="background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
 	></div>
 </div>

packages/stdf/components/loading/loadings/oneColor/1_15.svelte

@@ -20,26 +20,26 @@
 	};
 </script>
 
-<div class={`${size} m-auto relative`}>
+<div class="{size} m-auto relative">
 	<div
-		class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading1`}
+		class="absolute{colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading1"
 		style={`left:0;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
 	></div>
 	<div
-		class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading2`}
-		style={`left:25%;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
+		class="absolute{colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading2"
+		style="left:25%;background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
 	></div>
 	<div
-		class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading3`}
-		style={`left:50%;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
+		class="absolute{colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading3"
+		style="left:50%;background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
 	></div>
 	<div
-		class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading4`}
-		style={`left:75%;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
+		class="absolute{colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading4"
+		style="left:75%;background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
 	></div>
 	<div
-		class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading5`}
-		style={`left:100%;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
+		class="absolute{colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading5"
+		style="left:100%;background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
 	></div>
 </div>
 

packages/stdf/components/loading/loadings/oneColor/1_16.svelte

@@ -20,10 +20,10 @@
 	};
 </script>
 
-<div class={`${size} m-auto flex justify-between items-center`}>
+<div class="{size} m-auto flex justify-between items-center">
 	{#each [0, 1, 2] as i}
 		<div
-			class={`${colorClass()} rounded-full w-2 h-2 loading`}
+			class="{colorClass()} rounded-full w-2 h-2 loading"
 			style="animation-delay: {i * 100 - 300}ms;background: {customColor[0]};animation-duration: {1 /
 				speed}s;-webkit-animation-duration: {1 / speed}s;"
 		></div>

packages/stdf/components/loading/loadings/oneColor/1_17.svelte

@@ -20,10 +20,10 @@
 	};
 </script>
 
-<div class={`${size} m-auto flex justify-between items-center`}>
+<div class="{size} m-auto flex justify-between items-center">
 	{#each [0, 1, 2] as i}
 		<div
-			class={`${colorClass()} rounded-full w-2 h-2 loading`}
+			class="{colorClass()} rounded-full w-2 h-2 loading"
 			style="animation-delay: {i * 100 - 300}ms;background: {customColor[0]};animation-duration: {1 /
 				speed}s;-webkit-animation-duration: {1 / speed}s;"
 		></div>

packages/stdf/components/loading/loadings/oneColor/1_18.svelte

@@ -20,7 +20,7 @@
 	};
 </script>
 
-<div class={`${size} m-auto relative rotate-45`}>
+<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;"

packages/stdf/components/loading/loadings/oneColor/1_19.svelte

@@ -20,7 +20,7 @@
 	};
 </script>
 
-<div class={`${size} m-auto relative loading`} style="animation-duration: {1.6 / speed}s;-webkit-animation-duration: {1.6 / speed}s;">
+<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;"

packages/stdf/components/loading/loadings/oneColor/1_2.svelte

@@ -25,8 +25,7 @@
 </script>
 
 <div
-	class={`${size} m-auto border-2 rounded-full animate-spin ${colorClass()}`}
-	style={`border-color:${customColor[0] + '0D'};border-left-color:${customColor[0] + 'FF'};animation-duration: ${
-		1 / speed
-	}s;-webkit-animation-duration: ${1 / speed}s;`}
+	class="{size} m-auto border-2 rounded-full animate-spin {colorClass()}"
+	style="border-color:{customColor[0] + '0D'};border-left-color:{customColor[0] + 'FF'};animation-duration: {1 /
+		speed}s;-webkit-animation-duration: {1 / speed}s;"
 ></div>

packages/stdf/components/loading/loadings/oneColor/1_20.svelte

@@ -25,10 +25,9 @@
 </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;`}
+	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;"
 ></div>
 
 <style>

packages/stdf/components/loading/loadings/oneColor/1_21.svelte

@@ -20,7 +20,7 @@
 	};
 </script>
 
-<div class={`${size} m-auto relative loading`} style="animation-duration: {1.2 / speed}s;-webkit-animation-duration: {1.2 / speed}s;">
+<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;"

packages/stdf/components/loading/loadings/oneColor/1_23.svelte

@@ -21,7 +21,6 @@
 </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"

packages/stdf/components/loading/loadings/oneColor/1_27.svelte

@@ -36,7 +36,6 @@
 
 <style>
 	.container {
-		/* --uib-speed: 1.5s; */
 		animation: smoothRotate linear infinite;
 	}
 

packages/stdf/components/loading/loadings/oneColor/1_3.svelte

@@ -21,8 +21,7 @@
 </script>
 
 <div
-	class={`${size} m-auto border-2 rounded-full${colorClass()} border-t-transparent border-b-transparent dark:border-t-transparent dark:border-b-transparent animate-spin`}
-	style={`border-color: ${customColor[0]};border-top-color:transparent;border-bottom-color:transparent;;animation-duration: ${
-		1 / speed
-	}s;-webkit-animation-duration: ${1 / speed}s;`}
+	class="{size} m-auto border-2 rounded-full{colorClass()} border-t-transparent border-b-transparent dark:border-t-transparent dark:border-b-transparent animate-spin"
+	style="border-color: {customColor[0]};border-top-color:transparent;border-bottom-color:transparent;animation-duration: {1 /
+		speed}s;-webkit-animation-duration: {1 / speed}s;"
 ></div>

packages/stdf/components/loading/loadings/oneColor/1_34.svelte

@@ -20,15 +20,14 @@
 	};
 </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 class="{size} flex flex-col justify-center">
+	<div class="{size} m-auto relative rounded-full overflow-hidden" style="height:4px">
+		<div class="absolute 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>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/oneColor/1_35.svelte

@@ -20,15 +20,14 @@
 	};
 </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 class="{size} flex flex-col justify-center">
+	<div class="{size} m-auto relative rounded-full overflow-hidden" style="height:4px">
+		<div class="absolute 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>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/oneColor/1_4.svelte

@@ -20,19 +20,18 @@
 	};
 </script>
 
-<div class={`${size} m-auto flex flex-col justify-center`}>
+<div class="{size} m-auto flex flex-col justify-center">
 	<div
-		class={`relative w-[30px] h-[30px] m-auto border-2 rounded-full${colorClass()} border-t-transparent border-b-transparent dark:border-t-transparent dark:border-b-transparent animate-spin`}
-		style={`border-color: ${customColor[0]};border-top-color:transparent;border-bottom-color:transparent;animation-duration: ${
-			1 / speed
-		}s;-webkit-animation-duration: ${1 / speed}s;`}
+		class="relative w-8 h-8 m-auto border-2 rounded-full{colorClass()} border-t-transparent border-b-transparent dark:border-t-transparent dark:border-b-transparent animate-spin"
+		style="border-color: {customColor[0]};border-top-color:transparent;border-bottom-color:transparent;animation-duration: {1 /
+			speed}s;-webkit-animation-duration: {1 / speed}s;"
 	>
 		<div
-			class={`absolute${colorClass()} border-t-[5px] border-r-[5px] border-l-[5px] border-r-transparent border-l-transparent dark:border-r-transparent dark:border-l-transparent`}
+			class="absolute{colorClass()} border-t-[5px] border-r-[5px] border-l-[5px] border-r-transparent border-l-transparent dark:border-r-transparent dark:border-l-transparent"
 			style="transform: rotate(225deg);border-color: {customColor[0]};border-right-color:transparent;border-left-color:transparent;"
 		></div>
 		<div
-			class={`absolute bottom-0 right-0${colorClass()} border-t-[5px] border-r-[5px] border-l-[5px] border-r-transparent border-l-transparent dark:border-r-transparent dark:border-l-transparent`}
+			class="absolute bottom-0 right-0{colorClass()} border-t-[5px] border-r-[5px] border-l-[5px] border-r-transparent border-l-transparent dark:border-r-transparent dark:border-l-transparent"
 			style="transform: rotate(45deg);border-color: {customColor[0]};border-right-color:transparent;border-left-color:transparent;"
 		></div>
 	</div>

packages/stdf/components/loading/loadings/oneColor/1_5.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <div
-	class={`${size} m-auto rounded-full${colorClass()}`}
+	class="{size} m-auto rounded-full{colorClass()}"
 	style="background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
 ></div>
 

packages/stdf/components/loading/loadings/oneColor/1_52.svelte

@@ -20,7 +20,7 @@
 	};
 </script>
 
-<div class="{size} m-auto relative w-full h-full">
+<div class="{size} m-auto relative">
 	{#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()}"

packages/stdf/components/loading/loadings/oneColor/1_53.svelte

@@ -20,11 +20,11 @@
 	};
 </script>
 
-<div class="{size} m-auto relative w-full h-full">
+<div class="{size} m-auto relative">
 	{#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) *
+			style="background-color: {customColor[0]};top: 50%;animation-duration: {0.9 / speed}s;animation-delay: {(0.9 / speed) *
 				item[0]}s;opacity: {item[1]};"
 		></div>
 	{/each}

packages/stdf/components/loading/loadings/oneColor/1_6.svelte

@@ -20,13 +20,13 @@
 	};
 </script>
 
-<div class={`relative ${size} m-auto`}>
+<div class="relative {size} m-auto">
 	<div
-		class={`absolute${colorClass()} w-1/3 h-1/3 rounded-full loading1`}
+		class="absolute{colorClass()} w-1/3 h-1/3 rounded-full loading1"
 		style="background: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 / speed}s;"
 	></div>
 	<div
-		class={`absolute${colorClass()} w-1/3 h-1/3 rounded-full loading2`}
+		class="absolute{colorClass()} w-1/3 h-1/3 rounded-full loading2"
 		style="background: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 / speed}s;"
 	></div>
 </div>

packages/stdf/components/loading/loadings/oneColor/1_7.svelte

@@ -20,13 +20,13 @@
 	};
 </script>
 
-<div class={`${size} m-auto flex items-center`}>
+<div class="{size} m-auto flex items-center">
 	<div
-		class={`flex-1${colorClass()} rounded-full w-1/2 h-1/2 loading1`}
+		class="flex-1{colorClass()} rounded-full w-1/2 h-1/2 loading1"
 		style="background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
 	></div>
 	<div
-		class={`flex-1${colorClass()} rounded-full w-1/2 h-1/2 loading2`}
+		class="flex-1{colorClass()} rounded-full w-1/2 h-1/2 loading2"
 		style="background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
 	></div>
 </div>

packages/stdf/components/loading/loadings/oneColor/1_8.svelte

@@ -21,12 +21,12 @@
 </script>
 
 <div
-	class={`${size} m-auto flex justify-between items-center loading`}
+	class="{size} m-auto flex justify-between items-center loading"
 	style="animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
 >
-	<div class={`${colorClass()} rounded-full w-2 h-2`} style="background: {customColor[0]}"></div>
-	<div class={`${colorClass()} rounded-full w-2 h-2`} style="background: {customColor[0]}"></div>
-	<div class={`${colorClass()} rounded-full w-2 h-2`} style="background: {customColor[0]}"></div>
+	<div class="{colorClass()} rounded-full w-2 h-2" style="background: {customColor[0]}"></div>
+	<div class="{colorClass()} rounded-full w-2 h-2" style="background: {customColor[0]}"></div>
+	<div class="{colorClass()} rounded-full w-2 h-2" style="background: {customColor[0]}"></div>
 </div>
 
 <style>

packages/stdf/components/loading/loadings/oneColor/1_9.svelte

@@ -20,10 +20,10 @@
 	};
 </script>
 
-<div class={`relative ${size} m-auto`}>
+<div class="relative {size} m-auto">
 	{#each [0, 1, 2] as i}
 		<div
-			class={`absolute${colorClass()} w-1/3 h-1/3 rounded-full loading`}
+			class="absolute{colorClass()} w-1/3 h-1/3 rounded-full loading"
 			style="animation-delay: {i - 2}s;background: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 /
 				speed}s;"
 		></div>

packages/stdf/components/loading/loadings/twoColor/2_0.svelte

@@ -21,11 +21,11 @@
 </script>
 
 <div
-	class={`${size} m-auto border-2 p-0.5 rounded-full animate-spin${outerBorderClass()}`}
-	style="border-color:{customColor[0]};;animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
+	class="{size} m-auto border-2 p-0.5 rounded-full animate-spin{outerBorderClass()}"
+	style="border-color:{customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
 >
 	<div
-		class={`w-full h-full border-2 rounded-full${innerColorClass()}`}
+		class="w-full h-full border-2 rounded-full{innerColorClass()}"
 		style="border-color:{customColor[1] && 'transparent'};border-left-color:{customColor[1]}"
 	></div>
 </div>

packages/stdf/components/loading/loadings/twoColor/2_1.svelte

@@ -21,9 +21,9 @@
 </script>
 
 <div
-	class={`${size} m-auto border-2 p-0.5 rounded-full animate-spin${innerColorClass()}`}
+	class="{size} m-auto border-2 p-0.5 rounded-full animate-spin{innerColorClass()}"
 	style="border-color:{customColor[1] && 'transparent'};border-left-color:{customColor[1]};animation-duration: {1 /
 		speed}s;-webkit-animation-duration: {1 / speed}s;"
 >
-	<div class={`w-full h-full border-2 rounded-full${outerBorderClass()}`} style="border-color:{customColor[0]};"></div>
+	<div class="w-full h-full border-2 rounded-full{outerBorderClass()}" style="border-color:{customColor[0]};"></div>
 </div>

packages/stdf/components/loading/loadings/twoColor/2_2.svelte

@@ -18,10 +18,9 @@
 </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;`}
+	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;"
 ></div>
 
 <style>

packages/stdf/components/loading/loadings/twoColor/2_3.svelte

@@ -18,7 +18,7 @@
 	};
 </script>
 
-<div class={`${size} m-auto relative rotate-45`}>
+<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;"

packages/stdf/components/loading/loadings/twoColor/2_4.svelte

@@ -18,7 +18,7 @@
 	};
 </script>
 
-<div class={`${size} m-auto relative loading`} style="animation-duration: {1.6 / speed}s;-webkit-animation-duration: {1.6 / speed}s;">
+<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;"

packages/stdf/components/loading/loadings/twoColor/2_5.svelte

@@ -18,7 +18,7 @@
 	};
 </script>
 
-<div class={`${size} m-auto relative loading`} style="animation-duration: {1.2 / speed}s;-webkit-animation-duration: {1.2 / speed}s;">
+<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;"