@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

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

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

Import

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.

<libs_ui-components-spinner />

Inline Spinner (Trong Button)

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

<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).

<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

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

npx nx serve core-ui

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