Progreso circular (CircularProgress)

El componente CircularProgress (Progreso circular) se utiliza para indicar estados de carga al usuario. Muestra un indicador giratorio que puede ser personalizado en tamaño.

Uso

Para incorporar el componente CircularProgress, impórtalo desde tu biblioteca de componentes y, opcionalmente, pasa las props size (tamaño) y className para la personalización.

Progreso circular básico

Esto demuestra un uso básico del componente CircularProgress sin ninguna personalización.

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

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

Tamaños de progreso circular

Los siguientes ejemplos muestran cómo utilizar el componente CircularProgress en diferentes tamaños: pequeño, mediano y grande.

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>
    );
}