---
title: "Loading"
type: component
version: "2.2.1"
doc_version: "2.4.3"
status: stable
date: 2026-04-22
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS Loading with spinner, dots, bars, and ring variants. Multiple sizes and colors for accessible async feedback indicators."
url: https://frutjam.com/components/loading
---

# Loading Component

 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.

| Class             | Type  | Description                                             |
| ----------------- | ----- | ------------------------------------------------------- |
| loading           | Base  | Spinning ring indicator, inherits text color by default |
| loading-dots      | Style | Three pulsing dots                                      |
| loading-bars      | Style | Three animated vertical bars                            |
| loading-xs        | Size  | Extra small (1rem)                                      |
| loading-sm        | Size  | Small (1.25rem)                                         |
| loading-md        | Size  | Medium (1.5rem, default)                                |
| loading-lg        | Size  | Large (2rem)                                            |
| loading-xl        | Size  | Extra large (2.5rem)                                    |
| loading-base      | Color | Muted base surface color                                |
| loading-current   | Color | Explicitly inherits the current text color              |
| loading-primary   | Color | Primary theme color                                     |
| loading-secondary | Color | Secondary theme color                                   |
| loading-accent    | Color | Accent theme color                                      |
| loading-neutral   | Color | Neutral theme color                                     |
| loading-info      | Color | Info semantic color                                     |
| loading-success   | Color | Success semantic color                                  |
| loading-warning   | Color | Warning semantic color                                  |
| loading-error     | Color | Error semantic color                                    |

## Basic Usage

## Loading Styles

```html
<span class="loading"></span>
<span class="loading loading-dots"></span>
<span class="loading loading-bars"></span>
```


## Loading Sizes

```html
<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
<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

```html
<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
<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

```html
<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>
```