Skip to main content
Frutjam logo Frutjam
v2.2.1
Theme

Loading Component

CSS-only Tailwind CSS loading indicator with spinner, dots, ring, and bars animations. Color and size variants, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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 Type 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>