Skip to content

CircularProgress Component

Description

The CircularProgress component displays a rotating loader, commonly used to indicate an ongoing operation.

Props

Prop Type Default Description
size number 40 Diameter of the spinner (in pixels).
thickness number 4 Thickness of the circular border.
color string theme.palette.primary.main Spinner color.
trackColor string theme.palette.text.primary Background track color.
speed number 1.2 Speed of rotation (in seconds per full spin).

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { CircularProgress } from "@nomana-it/liberty-core"

export const CircularProgressExample = () => {
  return (
    <div style={{ display: "flex", gap: "16px" }}>
      <CircularProgress size={40} />
      <CircularProgress size={50} thickness={5} color="#ff4081" />
      <CircularProgress size={60} thickness={6} trackColor="gray" speed={2} />
    </div>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core