Skip to main content

LoadingSpinner


로딩 중

Usage​

import { CarmoreIcon } from '@o2-ui/carmore-icon';

// ...

  <CarmoreIcon icon={'loading-spinner'} ... />

// ...


spin Props​

Control whether the icon plays its rotation animation.

  • The default value for spin is true.
로딩 중
로딩 중
<CarmoreIcon icon={'loading-spinner'} ... /> // Uses the default ('true')
<CarmoreIcon icon={'loading-spinner'} spin={'false'} ... />


Control size​

You can control the icon size with the width and height props.

  • Pass numbers directly, or strings with units such as 'px', 'rem', or '%'.
    • (The icon keeps its intrinsic aspect ratio and cannot be stretched.)
  • The default width is '1.5rem'.
  • The default height is '1.5rem'.
로딩 중
로딩 중
로딩 중
로딩 중
<CarmoreIcon icon={'loading-spinner'} ... /> // Uses the default ('1.5rem')
<CarmoreIcon icon={'loading-spinner'} width={30} height={30} ... />
<CarmoreIcon icon={'loading-spinner'} width={'48px'} height={'48px'} ... />
<CarmoreIcon icon={'loading-spinner'} width={'5rem'} height={'5rem'} ... />


Change color​

Use the CSS variables below to adjust the icon colors.

  • --carmore-icon-loading-spinner-background
  • --carmore-icon-loading-spinner-foreground
로딩 중
로딩 중
.loading-spinner-icon-1 {
  ...
  --carmore-icon-loading-spinner-background: blue;
}

.loading-spinner-icon-2 {
  ...
  --carmore-icon-loading-spinner-foreground: blue;
}

<CarmoreIcon className={'loading-spinner-icon-1'} icon={'loading-spinner'} ... />
<CarmoreIcon className={'loading-spinner-icon-2'} icon={'loading-spinner'} ... />


Accessibility (a11y)​

We recommend configuring attributes such as role and aria-label.

  • The default role is 'status'.
  • A screen-reader-only text ('Loading') is provided by default.
  • The default value for aria-hidden is false (it stays exposed for screen readers).
<LoadingSpinner aria-label={'Loading data'} />
<LoadingSpinner aria-hidden={true} /> // When used purely as decoration