scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: added progress bar wrapper and handling of loading type according to button props

Browse Source
This commit is contained in:
Tobias Johansson
2025-04-24 13:54:10 +02:00
committed by Simon Emanuelsson
parent 32ce7d819b
commit 29abc3cba6
4 changed files with 40 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/design-system/lib/components/Loading/Loading.tsx
View File

@@ -2,6 +2,7 @@ import styles from './loading.module.css'
import { VariantProps } from 'class-variance-authority'
import { variants } from './variants'
import { ProgressBar } from 'react-aria-components'
export interface LoadingProps extends VariantProps<typeof variants> {
size?: number
@@ -13,22 +14,23 @@ export function Loading({ type, size = 20 }: LoadingProps) {
})
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 20 21"
fill="none"
className={classNames}
>
<circle className={styles.dot} cx="10" cy="2.64147" r="1.73913" />
<circle className={styles.dot} cx="16.087" cy="5.25018" r="1.73913" />
<circle className={styles.dot} cx="18.2609" cy="10.9023" r="1.73913" />
<circle className={styles.dot} cx="16.087" cy="16.5545" r="1.73913" />
<circle className={styles.dot} cx="10" cy="19.1632" r="1.73913" />
<circle className={styles.dot} cx="3.91304" cy="16.5545" r="1.73913" />
<circle className={styles.dot} cx="1.73913" cy="10.9023" r="1.73913" />
<circle className={styles.dot} cx="3.91304" cy="5.25018" r="1.73913" />
</svg>
<ProgressBar isIndeterminate className={classNames}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 20 21"
fill="none"
>
<circle className={styles.dot} cx="10" cy="2.64147" r="1.73913" />
<circle className={styles.dot} cx="16.087" cy="5.25018" r="1.73913" />
<circle className={styles.dot} cx="18.2609" cy="10.9023" r="1.73913" />
<circle className={styles.dot} cx="16.087" cy="16.5545" r="1.73913" />
<circle className={styles.dot} cx="10" cy="19.1632" r="1.73913" />
<circle className={styles.dot} cx="3.91304" cy="16.5545" r="1.73913" />
<circle className={styles.dot} cx="1.73913" cy="10.9023" r="1.73913" />
<circle className={styles.dot} cx="3.91304" cy="5.25018" r="1.73913" />
</svg>
</ProgressBar>
)
}

3
packages/design-system/lib/components/Loading/loading.module.css
View File

@@ -1,5 +1,6 @@
.loading {
display: inline-block;
display: flex;
align-items: center;
}
.dot {