Progress Circle

A progress circle is a progress indicator, either determinate (indicating a percentage of progression) or indeterminate (indicating a state of loading).

The track circle of a ProgressCircle is not visible if this component contains an attribute track={false}

With track layer

Without track layer

// With track layer
<ProgressCircle />
// Without track layer
<ProgressCircle track={false} />

Sizes

Progress circles are available in five sizes: xsmall, small, medium, large, xlarge.

While the default size is the medium one, the size="medium" attribute exists in case you need to reset the element to its medium size.

<ProgressCircle size="xsmall" />
<ProgressCircle size="small" />
<ProgressCircle size="medium" />
<ProgressCircle size="large" />
<ProgressCircle size="xlarge" />

Colors

Progress circles are available in three colors: primary, neutral and white. The default color is the primary one.

<ProgressCircle color="primary" />
<ProgressCircle color="neutral" />
<ProgressCircle color="white" />

Usage in buttons

Progress circles can be used within buttons to indicate loading states.

const [loading, setLoading] = useState(false);

<Button onClickEvent={() => setLoading(!loading)}>
  <span className={loading ? "hidden" : ""}>Click me</span>
  <ProgressCircle 
    color="white" 
    classes={loading ? "" : "hidden"} 
  />
</Button>

Event handling

Not applicable. The ProgressCircle component is a visual element and does not support any event handlers directly. To control the visibility of the progress circle, you should manage the state in your application as shown in the "Usage in buttons" example.

// Example of managing loading state in your application
const [loading, setLoading] = useState(false);

const handleButtonClick = () => {
  setLoading(true);
  
  // Simulate an async operation
  setTimeout(() => {
    setLoading(false);
  }, 2000);
};

// Show/hide the progress circle based on loading state
<Button onClickEvent={handleButtonClick}>
  <span className={loading ? "hidden" : ""}>Submit</span>
  <ProgressCircle 
    color="white" 
    classes={loading ? "" : "hidden"} 
  />
</Button>

API

QtmProgressCircle

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
color	"neutral" | "primary" | "white"	'primary'	The color of element
size	"large" | "medium" | "small" | "xlarge" | "xsmall"	'medium'	The size of element
track	boolean	true	If false, the track circle is not visible.