Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
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.

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
loadingOpieraćWskaźnik obracającego się pierścienia, domyślnie dziedziczy kolor tekstu
loading-dotsStylTrzy pulsujące kropki
loading-barsStylTrzy animowane pionowe paski
loading-xsRozmiarBardzo mały (1rem)
loading-smRozmiarMały (1,25 mb)
loading-mdRozmiarŚredni (1,5 rem, domyślnie)
loading-lgRozmiarDuży (2rem)
loading-xlRozmiarBardzo duży (2,5 mb)
loading-baseKolorStonowany kolor powierzchni bazowej
loading-currentKolorJawnie dziedziczy bieżący kolor tekstu
loading-primaryKolorPodstawowy kolor motywu
loading-secondaryKolorKolor motywu drugorzędnego
loading-accentKolorKolor motywu akcentującego
loading-neutralKolorNeutralny kolor motywu
loading-infoKolorKolor semantyczny informacji
loading-successKolorSukces semantyczny kolor
loading-warningKolorOstrzeżenie kolor semantyczny
loading-errorKolorBłąd koloru semantycznego

Podstawowe użycie

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

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

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

Ładowanie stylów

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

Ładowanie rozmiarów

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>

Ładowanie kolorów

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>

Ładowanie bieżącego koloru

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>

Ładowanie w przycisku

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>

Stany ładowania

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>