Loading
Circular Progress

Circular Progress

Indicates determinate loading status

Anatomy

import { CircularProgress } from "@lualtek/react-components";
 
export default () => {
  return <CircularProgress value={70} />;
};

API Reference

export type CircularProgressProps = {
  /**
   * Set the current progress of the progress bar.
   * This value should be between 0 and 'max'. The percentage is
   * automatically computed.
   */
  value: number;
 
  /**
   * Set the max value of the progress bar. This determines the
   * computed percentage.
   * @default 100
   */
  max?: number;
 
  /**
   * Set the dimension of the progress bar.
   * @default "regular"
   */
  dimension?: "small" | "regular" | "big";
 
  /**
   * Show or hide the progress value.
   */
  showProgress?: boolean;
 
  /**
   * Change the color of the progress bar.
   */
  color?: string;
};