CircularProgress
The CircularProgress
component is used to indicate loading states to the user. It displays a spinning indicator which can be customized in size.
Usage
To incorporate the CircularProgress
component, import it from your component library and optionally pass the size
and className
props for customization.
Basic CircularProgress
This demonstrates a basic usage of the CircularProgress
component without any customization.
import React from "react";
import { CircularProgress } from "@firecms/ui";
export default function CircularProgressBasicDemo() {
return <CircularProgress />;
}
CircularProgress Sizes
The following examples show how to use the CircularProgress
component in different sizes: small, medium, and large.
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>
);
}