CircularProgress 10.18.1

ARIA
RTL

A progress indicator (Circular and Linear) is a visual representation of a user’s progress through a set of steps, guiding toward the completion of a specified process.

Default

"use client";

import { CircularProgress } from "@heathmont/moon-core-tw";

const Default = () => <CircularProgress />;

export default Default;

    Size

    The CircularProgress offers an optional size property, which by default has the value md. To modify the sizing, simply assign any of the specified sizes to the size property: 2xs, xs, sm, md, or lg.

    "use client";

import { CircularProgress } from "@heathmont/moon-core-tw";

const Size = () => (
  <>
    <CircularProgress size="2xs" value={75} />
    <CircularProgress size="xs" value={75} />
    <CircularProgress size="sm" value={75} />
    <CircularProgress value={75} />
    <CircularProgress size="lg" value={75} />
  </>
);

export default Size;

      Value

      The CircularProgress has an optional value property that defaults to 0. You can assign any numerical value between 0 and 100 to represent the progress percentage.

      "use client";

import { CircularProgress } from "@heathmont/moon-core-tw";

const Value = () => (
  <>
    <CircularProgress value={33} />
    <CircularProgress value={66} />
    <CircularProgress value={100} />
  </>
);

export default Value;

        Customization

        You can utilize the className property for additional styling for the CircularProgress. Fundamentally, CircularProgress is an SVG with two elements or paths embedded within. The first path bears the class background and represents the complete background circle. The second path possesses the class progress and displays the value of CircularProgress.

        "use client";

import { CircularProgress } from "@heathmont/moon-core-tw";

const Customization = () => (
  <CircularProgress
    value={75}
    className="[&_.background]:stroke-whis [&_.progress]:stroke-dodoria"
  />
);

export default Customization;

          CircularProgress

          These are props specific to the CircularProgress component:

          Name
          Type
          Default
          className
          		string-
          size
          		"2xs" | "xs" | "sm" | "md" | "lg"2xs
          value
          		number0