Vue3 Typescript Loading Library

설치

npm install halox-loading-ts

Description

Vue3에서 지원하는 로딩(loading) 라이브러리입니다.

항상 최신 버전을 유지해주세요.

필요한 개선 요청은 깃헙 이슈로 남겨주세요.

Features

• 페이지 전체 클릭 차단 (backdrop)
• 위에서 아래로 내려오는 애니메이션
• id 기반 인스턴스 관리 (동일 id로 중복 표시 방지)
• 수동 close 지원

Changelog

• node v24.12.0
• vue 3.5.25

Usage Example

import "halox-loading-ts/dist/halox-loading-ts.css";
import { LoadingSimple } from "halox-loading-ts";

// 로딩 표시
LoadingSimple.show({ id: "loading1", message: "로딩중..." });

// 옵션 사용
LoadingSimple.show({
  id: "loading1",
  message: "데이터 로딩중...",
  color: "rgba(0, 0, 0, 0.8)",
  offset: -150,
});

// 로딩 닫기
// LoadingSimple.close(id: string)
LoadingSimple.close("loading1");

Params

interface LoadingOptions {
  id: string; // 로딩 인스턴스 식별자 (필수)
  message: string; // 표시 메시지 (필수)
  color?: string; // 배경색 (기본값: 'rgba(33, 33, 33, 0.9)')
  offset?: number; // 시작 위치 offset (기본값: -150)
}