메인 콘텐츠로 건너뛰기
Frutjam logo Frutjam
v2.2.2
Theme

구성 요소 로드 중

마지막 업데이트:

스피너, 점, 링 및 막대 애니메이션이 포함된 CSS 전용 Tailwind CSS 로딩 표시기입니다. 색상 및 크기 변형이 가능하며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

로드 구성 요소는 콘텐츠를 가져오거나 처리하는 동안 시각적 표시기를 표시하여 사용자에게 정보를 제공하고 감지되는 지연을 방지합니다. 시맨틱 HTML과 부드러운 CSS 애니메이션으로 구축된 로딩 스피너는 활성 백그라운드 작업을 전달합니다. Frutjam 로딩 시스템은 다양한 스타일, 색상 및 크기를 지원하므로 데이터 테이블, 파일 업로드, 양식 제출 및 비동기 작업에 이상적입니다.

CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

수업 유형 설명
loading베이스회전하는 링 표시기, 기본적으로 텍스트 색상 상속
loading-dots스타일깜박이는 점 3개
loading-bars스타일세 개의 애니메이션 수직 막대
loading-xs크기초소형(1rem)
loading-sm크기소형(1.25rem)
loading-md크기중간(1.5rem, 기본값)
loading-lg크기대형(2rem)
loading-xl크기특대형(2.5rem)
loading-base색상음소거된 베이스 표면 색상
loading-current색상현재 텍스트 색상을 명시적으로 상속합니다.
loading-primary색상기본 테마 색상
loading-secondary색상보조 테마 색상
loading-accent색상악센트 테마 색상
loading-neutral색상중립 테마 색상
loading-info색상정보 의미 색상
loading-success색상성공 의미 색상
loading-warning색상경고 의미 색상
loading-error색상오류 의미 색상

기본 사용법

<span class="loading"></span>

<span className="loading"></span>

<span class="loading"></span>

스타일 로드

html 
1
2
3
<span class="loading"></span>
<span class="loading loading-dots"></span>
<span class="loading loading-bars"></span>

적재 크기

html 
1
2
3
4
5
<span class="loading loading-xs"></span>
<span class="loading loading-sm"></span>
<span class="loading loading-md"></span>
<span class="loading loading-lg"></span>
<span class="loading loading-xl"></span>

색상 로딩

html 
1
2
3
4
5
6
7
8
9
<span class="loading loading-base"></span>
<span class="loading loading-primary"></span>
<span class="loading loading-secondary"></span>
<span class="loading loading-accent"></span>
<span class="loading loading-info"></span>
<span class="loading loading-success"></span>
<span class="loading loading-warning"></span>
<span class="loading loading-error"></span>
<span class="loading loading-neutral"></span>

현재 색상 로드

html 
1
2
3
4
5
6
7
8
<p class="text-primary flex items-center gap-2">
  <span class="loading loading-sm"></span>
  Inherits primary text color
</p>
<p class="text-error flex items-center gap-2">
  <span class="loading loading-sm"></span>
  Inherits error text color
</p>

버튼에 로드 중

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<button class="btn gap-2">
  <span class="loading loading-sm"></span>
  Loading
</button>

<button class="btn btn-primary gap-2">
  <span class="loading loading-sm loading-current"></span>
  Processing
</button>

<button class="btn btn-error gap-2">
  <span class="loading loading-sm loading-current"></span>
  Deleting
</button>

로드 상태

html 
1
2
3
4
5
6
7
8
9
<div class="card card-outline w-96">
  <div class="card-content">
    <h3 class="card-title">Loading Data</h3>
    <div class="flex items-center gap-2">
      <span class="loading loading-md"></span>
      <span>Fetching information...</span>
    </div>
  </div>
</div>

Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?

Cherry MCP는 AI 편집기에 요청 시 정확한 로드 중 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.

Cherry MCP를 사용해 보세요