75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
import * as _chakra_ui_system from '@chakra-ui/system';
|
|
import { HTMLChakraProps } from '@chakra-ui/system';
|
|
|
|
interface CircularProgressOptions {
|
|
/**
|
|
* The size of the circular progress in CSS units
|
|
*/
|
|
size?: string | number;
|
|
/**
|
|
* Maximum value defining 100% progress made (must be higher than 'min')
|
|
* @default 100
|
|
*/
|
|
max?: number;
|
|
/**
|
|
* Minimum value defining 'no progress' (must be lower than 'max')
|
|
* @default 0
|
|
*/
|
|
min?: number;
|
|
/**
|
|
* This defines the stroke width of the svg circle.
|
|
* @default "10px"
|
|
*/
|
|
thickness?: string | number;
|
|
/**
|
|
* Current progress (must be between min/max)
|
|
*/
|
|
value?: number;
|
|
/**
|
|
* If `true`, the cap of the progress indicator will be rounded.
|
|
*
|
|
* @default false
|
|
*/
|
|
capIsRound?: boolean;
|
|
/**
|
|
* The content of the circular progress bar. If passed, the content will be inside and centered in the progress bar.
|
|
*/
|
|
children?: React.ReactNode;
|
|
/**
|
|
* The color name of the progress track. Use a color key in the theme object
|
|
*/
|
|
trackColor?: string;
|
|
/**
|
|
* The color of the progress indicator. Use a color key in the theme object
|
|
*/
|
|
color?: string;
|
|
/**
|
|
* The desired valueText to use in place of the value
|
|
*/
|
|
valueText?: string;
|
|
/**
|
|
* A function that returns the desired valueText to use in place of the value
|
|
*/
|
|
getValueText?(value: number, percent: number): string;
|
|
/**
|
|
* If `true`, the progress will be indeterminate and the `value`
|
|
* prop will be ignored
|
|
*
|
|
* @default false
|
|
*/
|
|
isIndeterminate?: boolean;
|
|
}
|
|
interface CircularProgressProps extends Omit<HTMLChakraProps<"div">, "color">, CircularProgressOptions {
|
|
}
|
|
/**
|
|
* CircularProgress is used to indicate the progress of an activity.
|
|
* It is built using `svg` and `circle` components with support for
|
|
* theming and `indeterminate` state
|
|
*
|
|
* @see Docs https://chakra-ui.com/circularprogress
|
|
* @todo add theming support for circular progress
|
|
*/
|
|
declare const CircularProgress: _chakra_ui_system.ComponentWithAs<"div", CircularProgressProps>;
|
|
|
|
export { CircularProgress, CircularProgressProps };
|