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

구성 요소 로드 중

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

Loading components display visual indicators while content is being fetched or processed, keeping users informed and preventing perceived delays. Built with semantic HTML and smooth CSS animations, loading spinners communicate active background operations. The Frutjam loading system supports multiple styles, colors, and sizes—ideal for data tables, file uploads, form submissions, and asynchronous operations.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

Class 타입 Description
loadingBaseSpinning ring indicator, inherits text color by default
loading-dotsStyleThree pulsing dots
loading-barsStyleThree animated vertical bars
loading-xsSizeExtra small (1rem)
loading-smSizeSmall (1.25rem)
loading-mdSizeMedium (1.5rem, default)
loading-lgSizeLarge (2rem)
loading-xlSizeExtra large (2.5rem)
loading-baseColorMuted base surface color
loading-currentColorExplicitly inherits the current text color
loading-primaryColorPrimary theme color
loading-secondaryColorSecondary theme color
loading-accentColorAccent theme color
loading-neutralColorNeutral theme color
loading-infoColorInfo semantic color
loading-successColorSuccess semantic color
loading-warningColorWarning semantic color
loading-errorColorError semantic color

Basic Usage

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

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

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

Loading Styles

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

Loading Sizes

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>

Loading Colors

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>

Loading Current Color

Inherits primary text color

Inherits error text color

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>

Loading in Button

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>

Loading States

Loading Data

Fetching information...
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>