yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui/loader: transform to use css modules

Browse Source
This commit is contained in:
Johannes Kirschbauer
2025-07-30 10:51:48 +02:00
parent 7961a92d32
commit a070fc74c1
2 changed files with 24 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
pkgs/clan-app/ui/src/components/Loader/Loader.css → pkgs/clan-app/ui/src/components/Loader/Loader.module.css
View File

@@ -15,30 +15,30 @@
background: #0051ff; background: #0051ff;
} }
} }
}
& > div.wrapper { .wrapper {
@apply absolute top-0 left-0 w-full h-full; @apply absolute top-0 left-0 w-full h-full;
transform: translate(0%, 0%) rotate(-45deg); transform: translate(0%, 0%) rotate(-45deg);
animation: moveLoaderWrapper 1.8s ease-in-out infinite; animation: moveLoaderWrapper 1.8s ease-in-out infinite;
}
& > div.parent { .parent {
@apply absolute top-1/2 left-1/2; @apply absolute top-1/2 left-1/2;
@apply w-2/3 h-2/3; @apply w-2/3 h-2/3;
border-radius: 50%; border-radius: 50%;
animation: moveLoaderParent 1.8s ease-in-out infinite; animation: moveLoaderParent 1.8s ease-in-out infinite;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
} }
}
& > .child { .child {
@apply absolute z-10 top-1/2 left-1/2 w-1/2 h-1/2; @apply absolute z-10 top-1/2 left-1/2 w-1/2 h-1/2;
border-radius: 50%; border-radius: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
animation: moveLoaderChild 1.8s ease-in-out infinite; animation: moveLoaderChild 1.8s ease-in-out infinite;
}
} }
@keyframes moveLoaderWrapper { @keyframes moveLoaderWrapper {

11
pkgs/clan-app/ui/src/components/Loader/Loader.tsx
View File

@@ -1,4 +1,5 @@
import "./Loader.css"; // Loader.tsx
import styles from "./Loader.module.css";
import cx from "classnames"; import cx from "classnames";
export type Hierarchy = "primary" | "secondary"; export type Hierarchy = "primary" | "secondary";
@@ -9,11 +10,11 @@ export interface LoaderProps {
export const Loader = (props: LoaderProps) => { export const Loader = (props: LoaderProps) => {
return ( return (
<div class={cx("loader", props.hierarchy || "primary")}> <div class={cx(styles.loader, styles[props.hierarchy || "primary"])}>
<div class="wrapper"> <div class={styles.wrapper}>
<div class="parent"></div> <div class={styles.parent}></div>
</div> </div>
<div class="child"></div> <div class={styles.child}></div>
</div> </div>
); );
}; };