---
title: "Loading"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
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/pl/components/loading
---

# Loading Component

Komponenty ładujące wyświetlają wskaźniki wizualne podczas pobierania lub przetwarzania treści, informując użytkowników na bieżąco i zapobiegając zauważalnym opóźnieniom. Zbudowane z semantycznego HTML i płynnych animacji CSS, ładujące pokrętła komunikują aktywne operacje w tle. System ładowania Frutjam obsługuje wiele stylów, kolorów i rozmiarów — idealnie nadaje się do tabel danych, przesyłania plików, przesyłania formularzy i operacji asynchronicznych.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa             | Typ     | Opis                                                                     |
| ----------------- | ------- | ------------------------------------------------------------------------ |
| loading           | Opierać | Wskaźnik obracającego się pierścienia, domyślnie dziedziczy kolor tekstu |
| loading-dots      | Styl    | Trzy pulsujące kropki                                                    |
| loading-bars      | Styl    | Trzy animowane pionowe paski                                             |
| loading-xs        | Rozmiar | Bardzo mały (1rem)                                                       |
| loading-sm        | Rozmiar | Mały (1,25 mb)                                                           |
| loading-md        | Rozmiar | Średni (1,5 rem, domyślnie)                                              |
| loading-lg        | Rozmiar | Duży (2rem)                                                              |
| loading-xl        | Rozmiar | Bardzo duży (2,5 mb)                                                     |
| loading-base      | Kolor   | Stonowany kolor powierzchni bazowej                                      |
| loading-current   | Kolor   | Jawnie dziedziczy bieżący kolor tekstu                                   |
| loading-primary   | Kolor   | Podstawowy kolor motywu                                                  |
| loading-secondary | Kolor   | Kolor motywu drugorzędnego                                               |
| loading-accent    | Kolor   | Kolor motywu akcentującego                                               |
| loading-neutral   | Kolor   | Neutralny kolor motywu                                                   |
| loading-info      | Kolor   | Kolor semantyczny informacji                                             |
| loading-success   | Kolor   | Sukces semantyczny kolor                                                 |
| loading-warning   | Kolor   | Ostrzeżenie kolor semantyczny                                            |
| loading-error     | Kolor   | Błąd koloru semantycznego                                                |

## Podstawowe użycie

## Ładowanie stylów

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

## Ładowanie rozmiarów

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

## Ładowanie kolorów

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

## Ładowanie bieżącego koloru

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

## Ładowanie w przycisku

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

## Stany ładowania

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