loading.dev bündelt knapp 30 animierte Ladeindikatoren für React in einem kostenlosen npm-Paket von Jakub Krehel und Paul Faivret. Den Hinweis für Screenreader muss das einbindende Team allerdings selbst ergänzen.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Rund 22.000 Downloads verzeichnete das Paket mit den Ladeindikatoren für React in der Woche vom 15. bis 21. September, gut fünf Wochen nach der ersten Version.[1] Die etablierte Bibliothek react-spinners kam im selben Zeitraum auf über 570.000 Downloads. Der Neuling unterscheidet sich vom Platzhirsch vor allem in der Technik.
Das Wichtigste in Kürze
- loading.dev enthält knapp 30 Ladeindikatoren als React-Komponenten, kostenlos unter MIT-Lizenz.[2]
- Voraussetzung ist React 19, weil jede Komponente ihr CSS über die style-Komponente von React einbindet.
- Alle Indikatoren sind für Screenreader ausgeblendet, den Statustext schreiben Entwickler selbst.
- Bei aktivierter Einstellung „Bewegung reduzieren“ bleiben drehende Indikatoren stehen.
Wie funktioniert loading.dev?
Jeder Ladeindikator von loading.dev steckt in einer React-Komponente aus SVG-Grafik oder einfachen HTML-Elementen und wird ausschließlich per CSS animiert. Eine JavaScript-Animationsbibliothek braucht das Paket nicht, die Installation läuft über npm install loading-dev.[3]
Alle Komponenten akzeptieren die Eigenschaften size, color und duration, einzelne zusätzlich eine Easing-Kurve oder die Form der Linienenden.[2] Die Standardgröße liegt bei 20 Pixeln. Ohne Farbangabe erbt jeder Indikator per currentColor die Textfarbe seines Elternelements, über playState lässt sich die Animation anhalten.
Die React-19-Pflicht hat einen technischen Grund. Jede Komponente rendert ihr Stylesheet als style-Element mit den Attributen href und precedence.[2] Seit Version 19 verschiebt React solche Styles in den Dokumentkopf und entfernt Dubletten mit gleichem href.[4] Projekte auf React 18 bleiben außen vor, react-spinners unterstützt dagegen React 16 bis 19.[5]
Für Coding-Agenten stellt die Website eine llms.txt-Datei bereit und liefert jede Spinner-Seite zusätzlich als Markdown aus, samt Import-Namen und Eigenschaften.[3]
Was fehlt loading.dev bei der Barrierefreiheit?
Jeder Indikator ist mit aria-hidden="true" ausgezeichnet, Screenreader übergehen die Animation also komplett. Einen hörbaren Hinweis wie „Wird geladen“ müssen Entwickler selbst ergänzen.[2]
Aus Entwicklersicht ergibt die Auszeichnung Sinn, weil eine drehende Grafik keinen Text enthält. WCAG-Erfolgskriterium 4.1.3 (Stufe AA) verlangt jedoch, dass Statusmeldungen für Hilfstechnik auslesbar sind, ohne dass der Fokus springt.[6] Ein Element mit role="status" und kurzem Text neben dem Spinner erfüllt diese Vorgabe. Seit Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz viele Online-Shops und digitale Dienste auf diese Maßstäbe.
Eine zweite Stolperstelle betrifft Nutzer, die im Betriebssystem reduzierte Bewegung eingestellt haben. Für drehende Indikatoren wie Arc setzt das Stylesheet die Animation in diesem Fall auf none.[2] Übrig bleibt ein stehender Kreisbogen, den Nutzer ohne Begleittext leicht für eine hängende Anwendung halten. Warum Barrierefreiheit gerade zwischen Entwurf und Code verloren geht, beschreibt der Beitrag zur Übergabe von Design an Entwicklung.
npm-Downloads vom 15. bis 21. September 2026
Ein Spinner beruhigt nur die Nutzer, die ihn sehen. Koppeln Sie jeden Ladeindikator an einen kurzen Statustext, sonst erfahren Screenreader-Nutzer nichts vom Ladevorgang.
— Michael Dobler, Herausgeber Dr. Web
Für wen lohnt sich der Einsatz?
loading.dev eignet sich für Agenturen und Inhouse-Teams, die bereits mit React 19 arbeiten und einheitliche, per Eigenschaft anpassbare Ladeindikatoren suchen. Für ältere React-Projekte bleibt react-spinners die pragmatische Wahl.
Noch ist das Projekt jung: Das GitHub-Repository entstand am 14. September und zählt 215 Sterne.[2] Mit Version 0.3.4 steht die Bibliothek vor dem ersten stabilen Release.[1] Bausteine zum Kopieren statt Installieren bieten beUI mit animierten React-Komponenten und die UI-Bausteine von Bencho.
Vor dem Einbau lohnt der Blick auf die Wartezeit. Die Nielsen Norman Group empfiehlt Endlos-Animationen nur für Vorgänge zwischen 2 und 10 Sekunden.[7] Unter einer Sekunde lenkt ein Spinner ab, bei Vorgängen über zehn Sekunden gehört eine Fortschrittsanzeige in Prozent auf den Bildschirm. Wie viel eine klare Rückmeldung für die Bedienung ausmacht, zeigt auch der Beitrag über deaktivierte Buttons in Formularen.
Quellen
[1] npm: „loading-dev“
[2] Jakub Krehel: „loading“ (GitHub-Repository)
[3] Jakub Krehel, Paul Faivret: „loading.dev“
[4] React: „<style>“ (Dokumentation)
[5] npm: „react-spinners“
[6] W3C: „Understanding SC 4.1.3: Status Messages“
[7] Katie Sherwin, Nielsen Norman Group: „Progress Indicators Make a Slow System Less Insufferable“
Mehr Newshunger?
- Category Colors: Ein Optimierer sucht die am wenigsten falschen Diagrammfarben
- Cavalry: Kostenlose prozedurale Motion-Design-Software mit Lottie-Export fürs Web
- Liquid Gooey bringt den Gooey-Effekt als React-Komponente bis in Safari
- Barrierefreiheit als Designregeln: Der A11y Experience Guide übersetzt die WCAG-Norm
- 150 Zeilen JS sparen: Was modernes CSS jetzt kann
