Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Komponente wird geladen

Zuletzt aktualisiert:

Nur CSS-Tailwind-CSS-Ladeanzeige mit Spinner-, Punkt-, Ring- und Balkenanimationen. Farb- und Größenvarianten, kein JavaScript erforderlich. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Ladekomponenten zeigen visuelle Indikatoren an, während Inhalte abgerufen oder verarbeitet werden, um Benutzer auf dem Laufenden zu halten und wahrgenommene Verzögerungen zu vermeiden. Die mit semantischem HTML und reibungslosen CSS-Animationen erstellten Lade-Spinner kommunizieren aktive Hintergrundvorgänge. Das Frutjam-Ladesystem unterstützt mehrere Stile, Farben und Größen – ideal für Datentabellen, Datei-Uploads, Formularübermittlungen und asynchrone Vorgänge.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
loadingBaseDrehringanzeige, übernimmt standardmäßig die Textfarbe
loading-dotsStilDrei pulsierende Punkte
loading-barsStilDrei animierte vertikale Balken
loading-xsGrößeExtra klein (1rem)
loading-smGrößeKlein (1,25rem)
loading-mdGrößeMittel (1,5rem, Standard)
loading-lgGrößeGroß (2rem)
loading-xlGrößeExtra groß (2,5rem)
loading-baseFarbeGedeckte Grundflächenfarbe
loading-currentFarbeErbt explizit die aktuelle Textfarbe
loading-primaryFarbePrimäre Designfarbe
loading-secondaryFarbeSekundäre Themenfarbe
loading-accentFarbeAkzentfarbe des Themas
loading-neutralFarbeNeutrale Themenfarbe
loading-infoFarbeSemantische Infofarbe
loading-successFarbeSemantische Erfolgsfarbe
loading-warningFarbeSemantische Warnungsfarbe
loading-errorFarbeSemantische Fehlerfarbe

Grundlegende Verwendung

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

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

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

Laden von Stilen

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

Laden von Größen

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>

Farben laden

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>

Aktuelle Farbe wird geladen

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>

Laden in der Schaltfläche

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>

Ladezustände

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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Laden-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP