Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Ładowanie komponentu

Ostatnia aktualizacja:

Wskaźnik ładowania CSS Tailwind tylko dla CSS z animacjami pokrętła, kropek, pierścienia i pasków. Warianty kolorów i rozmiarów, nie wymaga JavaScript. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

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>

Używasz kodu Claude'a, kursora lub innego edytora AI?

Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Załadunek. Żadnych więcej zajęć z halucynacjami.

Try Cherry MCP