npm package: @libs-ui/components-spinner
Description: > Component hiển thị hiệu ứng loading (spinner) đơn giản, nhẹ nhàng.
Latest version: 0.2.356-23

# @libs-ui/components-spinner

> Component hiển thị hiệu ứng loading (spinner) đơn giản, nhẹ nhàng.

## Giới thiệu

`LibsUiComponentsSpinnerComponent` là một standalone Angular component hiển thị spinner loading với hiệu ứng xoay, hỗ trợ các kích thước và màu sắc khác nhau. Component đặc biệt hữu ích cho việc hiển thị trạng thái loading cục bộ hoặc loading toàn màn hình (với chế độ absolute).

### Tính năng

- ✅ Hiệu ứng xoay mượt mà (Conic Gradient Animation)
- ✅ 4 kích thước chuẩn: Large (64px), Medium (20px), Small (16px), Smaller (12px)
- ✅ 2 chế độ màu: Blue, White
- ✅ 2 chế độ vị trí: Normal (flow), Absolute (centered)

## Khi nào sử dụng

- Khi đang tải dữ liệu cục bộ (trong button, card, input).
- Khi đang tải dữ liệu toàn trang hoặc modal (overlay).
- Thay thế cho text "Loading..." để tiết kiệm diện tích và tăng tính thẩm mỹ.

## Cài đặt

```bash
# npm
npm install @libs-ui/components-spinner

# yarn
yarn add @libs-ui/components-spinner
```

## Import

```typescript
import { LibsUiComponentsSpinnerComponent } from '@libs-ui/components-spinner';

@Component({
  standalone: true,
  imports: [LibsUiComponentsSpinnerComponent],
  // ...
})
export class YourComponent {}
```

## Ví dụ

### Basic (Default)

Mặc định là `medium` size và `spin-absolute-blue`.

```html
<libs_ui-components-spinner />
```

### Inline Spinner (Trong Button)

Sử dụng `type="spin-white"` và `size="smaller"` hoặc `size="small"`.

```html
<button class="btn btn-primary flex items-center gap-2">
  <libs_ui-components-spinner
    type="spin-white"
    size="small" />
  <span>Loading...</span>
</button>
```

### Overlay/Absolute Spinner

Sử dụng `type="spin-absolute-blue"` để căn giữa container (Container cần có `position: relative`).

```html
<div class="relative w-full h-[200px] border">
  <libs_ui-components-spinner
    type="spin-absolute-blue"
    size="large" />
</div>
```

## API

### LibsUiComponentsSpinnerComponent

Selector: `libs_ui-components-spinner`

#### Inputs

| Property | Type                                          | Default                | Description                        |
| -------- | --------------------------------------------- | ---------------------- | ---------------------------------- |
| `[type]` | `TYPE_SPINNER`                                | `'spin-absolute-blue'` | Kiểu hiển thị (màu sắc và vị trí). |
| `[size]` | `'large' \| 'medium' \| 'small' \| 'smaller'` | `'medium'`             | Kích thước của spinner.            |

### Types

#### TYPE_SPINNER

```typescript
export type TYPE_SPINNER =
  | 'spin-absolute-blue' // Căn giữa tuyệt đối, màu xanh
  | 'spin-absolute-white' // Căn giữa tuyệt đối, màu trắng
  | 'spin-blue' // Normal flow, màu xanh
  | 'spin-white'; // Normal flow, màu trắng
```

## Styling

Component sử dụng CSS `conic-gradient` và `mask` để tạo hình dạng spinner, giúp nó nhẹ và mượt mà trên các trình duyệt hiện đại.

## Lưu ý (Caveats)

⚠️ **Reactivity**: Hiện tại kích thước (`size`) chỉ được tính toán một lần tại thời điểm khởi tạo (`ngOnInit`). Việc thay đổi input `size` sau khi component đã render sẽ **không** cập nhật kích thước spinner. Nếu cần thay đổi size động, hãy sử dụng `*ngIf` để re-create component.

## Demo

```bash
npx nx serve core-ui
```

Truy cập: `http://localhost:4500/spinner`