Runder Ladeindikator (CircularProgress)

Die Komponente CircularProgress wird verwendet, um dem Benutzer Ladezustände anzuzeigen. Sie zeigt einen drehenden Indikator an, der in der Größe angepasst werden kann.

Verwendung

Um die Komponente CircularProgress einzubinden, importieren Sie sie aus Ihrer Komponentenbibliothek und übergeben Sie optional die Eigenschaften size und className zur Anpassung.

Einfacher CircularProgress

Dies demonstriert eine grundlegende Verwendung der Komponente CircularProgress ohne Anpassungen.

import React from "react";
import { CircularProgress } from "@firecms/ui";

export default function CircularProgressBasicDemo() {
    return <CircularProgress />;
}

CircularProgress-Größen

Die folgenden Beispiele zeigen, wie die Komponente CircularProgress in verschiedenen Größen verwendet wird: klein, mittel und groß.

import React from "react";
import { CircularProgress } from "@firecms/ui";

export default function CircularProgressSizesDemo() {
    return (
        <div>
            <div>
                <p>Smallest</p>
                <CircularProgress size="smallest" />
            </div>
            <div>
                <p>Small</p>
                <CircularProgress size="small" />
            </div>
            <div>
                <p>Medium</p>
                <CircularProgress size="medium" />
            </div>
            <div>
                <p>Large</p>
                <CircularProgress size="large" />
            </div>
        </div>
    );
}