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

feat: comment updates

Browse Source
This commit is contained in:
Simon Emanuelsson
2025-05-03 21:56:56 +02:00
committed by Michael Zetterberg
parent 29abc3cba6
commit 91933f47cf
6 changed files with 86 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,35 +1,40 @@
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> {
ariaLabel?: string
size?: number
}
export function Loading({ type, size = 20 }: LoadingProps) {
export function Loading({
ariaLabel = 'Loading',
size = 20,
type,
}: LoadingProps) {
const classNames = variants({
type,
})
return (
<ProgressBar isIndeterminate className={classNames}>
<ProgressBar aria-label={ariaLabel} isIndeterminate className={classNames}>
<svg
className={classNames}
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 20 21"
fill="none"
height={size}
viewBox="0 0 20 20"
width={size}
>
<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" />
<circle cx="50%" cy="8.6955%" r="8.6955%" />
<circle cx="80.435%" cy="21.73915%" r="8.6955%" />
<circle cx="91.3045%" cy="50%" r="8.6955%" />
<circle cx="80.435%" cy="78.261%" r="8.6955%" />
<circle cx="50%" cy="91.3045%" r="8.6955%" />
<circle cx="19.5652%" cy="78.261%" r="8.6955%" />
<circle cx="8.6955%" cy="50%" r="8.6955%" />
<circle cx="19.5652%" cy="21.73915%" r="8.6955%" />
</svg>
</ProgressBar>
)