CircularProgress

O componente CircularProgress é usado para indicar estados de carregamento ao usuário. Exibe um indicador giratório que pode ser personalizado em tamanho.

Uso

Para incorporar o componente CircularProgress, importe-o da sua biblioteca de componentes e, opcionalmente, passe as props size e className para personalização.

CircularProgress básico

Isso demonstra um uso básico do componente CircularProgress sem nenhuma personalização.

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

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

Tamanhos do CircularProgress

Os exemplos a seguir mostram como usar o componente CircularProgress em diferentes tamanhos: pequeno, médio e 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>
    );
}