Ladezeiten sichtbar machen mit einem Loadingspinner
Du kennst das sicher: In Canvas-Apps passiert’s öfter mal, dass bei längeren Ladezeiten – zum Beispiel wenn Daten aus einer API geholt werden oder die App gerade was Komplexes berechnet – einfach nichts passiert. Kein Feedback, keine Info, nur… Stillstand. Für die Nutzer sieht das dann schnell so aus, als wäre die App abgestürzt. Muss aber nicht sein!
Mit einem schicken, animierten Loadingspinner kannst du das Ganze richtig smooth lösen – und das ganz ohne extra Komponenten oder hochgeladene Medien-Dateien.
In diesem Artikel zeig ich dir Schritt für Schritt, wie du moderne SVG-Spinner direkt in Power Apps einbindest, die Farben easy anpasst und sogar dein eigenes Design mit Hilfe von ChatGPT erzeugst. Ganz ohne Schnickschnack – einfach direkt in Power Apps.
Warum ein SVG-Spinner die bessere Wahl ist
Ein echter Geheimtipp für coole, flexible Ladeanimationen ist SVG Viewer. Die Seite bietet nicht nur eine riesige Auswahl an hochwertigen SVG-Spinners – du kannst sie dort auch direkt farblich anpassen, die Größe ändern und die Animation live testen. Richtig praktisch: Der generierte SVG-Code steht dir sofort zur Verfügung und lässt sich ohne Umweg in Power Apps einfügen.
Der große Vorteil: Du musst keine Abhängigkeiten einbinden oder auf externe CDNs setzen. Einfach den optimierten SVG-Code kopieren, in dein Image Control einfügen, und fertig. Das spart nicht nur Ladezeit, sondern erhöht auch die Kontrolle über das Design deiner App. Mit ein bisschen HTML- und SVG-Know-how kannst du die Animationen auch im Nachhinein leicht anpassen – zum Beispiel Farben dynamisch per Formel ändern oder die Animation bei Bedarf stoppen.
Wie du sogar komplett eigene SVG-Spinner mit Hilfe von ChatGPT generieren kannst, zeige ich dir gleich.
Integration eines SVG-Spinners in Power Apps
Die einfachste Möglichkeit, einen Spinner in Power Apps darzustellen, besteht darin, das SVG direkt als Datenquelle für ein Bild-Element zu verwenden. Dafür nutzt man die Funktion "data:image/svg+xml;utf8, " & EncodeUrl(...), um den SVG-Code korrekt einzubetten. Das Ergebnis wird dann im Image-Control angezeigt.
Um die Farbwerte innerhalb des SVGs flexibel zu steuern, empfiehlt es sich, die With()-Funktion zu verwenden. Dadurch lassen sich Farben zentral definieren und an mehreren Stellen im SVG referenzieren. Das folgende Beispiel zeigt einen vertikalen Balken-Spinner mit animierten Höhenänderungen und zwei Farbwerten, die als Variablen verwaltet werden:
Power Apps |
Die Sichtbarkeit dieses Spinners kannst du in deiner App beispielsweise mit einer Kontextvariable wie isLoading steuern. Den in der Regel möchtest du ja noch andere Elemente wie ein Info-Text anzeigen oder vielleicht auch einen Ladbalken? Jedenfalls, beim Start eines Prozesses setzt du UpdateContext({ isLoading: true }), und nach Abschluss entsprechend false. Der Container wird dann nur angezeigt, wenn die Variable aktiv ist.
Eigene SVG-Spinner mit ChatGPT generieren
Nicht immer findet man in einer Bibliothek genau das Spinner-Design, das zur App passt. In solchen Fällen ist es hilfreich, einen eigenen Spinner zu erstellen – und genau hier kann ChatGPT unterstützen. Mithilfe gezielter Prompts kannst du dir individuelle SVG-Animationen generieren lassen, die perfekt auf dein Layout und deine Anforderungen abgestimmt sind.
Ein guter Prompt beschreibt klar, wie der Spinner aussehen soll: Welche Form soll animiert werden – Kreise, Balken, Punkte? In welcher Größe? Welche Farben sollen verwendet werden? Und wie soll sich das Ganze bewegen – pulsierend, drehend oder schwebend?
Ein Beispiel für einen effektiven Prompt wäre: „Erstelle ein SVG mit fünf vertikalen Balken, die nacheinander pulsieren. Die Animation soll endlos laufen. Verwende die Farben #EACC27 und #41D3BD im Wechsel. Die Größe soll 24×24 Pixel betragen.“
ChatGPT liefert dir daraufhin einen vollständigen SVG-Code, den du direkt in Power Apps verwenden kannst. Wenn du möchtest, kannst du auch darum bitten, den SVG-Code direkt für Power Apps aufzubereiten – etwa so: „Bitte gib mir den SVG-Code als String, den ich in Power Apps über EncodeUrl() in einem Image-Control verwenden kann.“ ChatGPT wandelt dann automatisch kritische Zeichen korrekt um. Hier ein weiteres Beispiel für einen Prompt, der einen klassischen Kreisspinner erzeugt:
„Generiere mir ein SVG mit einem sich drehenden Kreis (Stroke). Die Farbe ist #0078D4, die Größe beträgt 32×32 Pixel. Die Animation soll flüssig und unendlich ablaufen.“
Auch solche Spinner lassen sich mit ChatGPT unkompliziert generieren und direkt in deiner App verwenden.
Fazit
Loadingspinner verbessern nicht nur die Benutzererfahrung, sondern geben deiner App auch eine professionelle Anmutung. Mit SVGs hast du maximale Kontrolle über das Design, ohne auf externe Medien angewiesen zu sein. In Kombination mit Power Apps‘ With()-Funktion gelingt die Farbsteuerung besonders elegant. ChatGPT eröffnet zusätzlich eine kreative Möglichkeit, individuelle Spinner zu entwerfen – ganz ohne Grafiksoftware. Ob einfache Kreise oder komplexe Animationen: Mit dem richtigen Prompt erhältst du genau den Ladeindikator, der zu deiner App passt. Wenn du das Beste aus Funktionalität, Design und Dynamik in Power Apps herausholen möchtest, lohnt sich der Blick auf SVG-basierte Spinner allemal – und mit ChatGPT als kreativen Assistenten sind deinen Ideen keine Grenzen gesetzt.