@mantine/core/lib/components/SemiCircleProgress/SemiCircleProgress.d.ts

React components library focused on usability, accessibility and developer experience

import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
export type SemiCircleProgressStylesNames = 'root' | 'svg' | 'emptySegment' | 'filledSegment' | 'label';
export type SemiCircleProgressCssVariables = {
    root: '--scp-filled-segment-color' | '--scp-empty-segment-color' | '--scp-rotation' | '--scp-transition-duration' | '--scp-thickness';
};
export interface SemiCircleProgressProps extends BoxProps, StylesApiProps<SemiCircleProgressFactory>, ElementProps<'div'> {
    /** Progress value from `0` to `100` */
    value: number;
    /** Width of the component and diameter of the full circle in px. The visible SVG height will be size/2 @default 200 */
    size?: number;
    /** Stroke width of the circle segments in px @default 12 */
    thickness?: number;
    /** Orientation of the circle @default 'up' */
    orientation?: 'up' | 'down';
    /** Direction from which the circle is filled @default 'left-to-right' */
    fillDirection?: 'right-to-left' | 'left-to-right';
    /** Key of `theme.colors` or any valid CSS color value @default theme.primaryColor */
    filledSegmentColor?: MantineColor;
    /** Key of `theme.colors` or any valid CSS color value @default 'gray.2' in light mode, 'dark.4' in dark mode */
    emptySegmentColor?: MantineColor;
    /** Transition duration for the filled segment progress changes in ms. Does not affect color transitions @default 0 */
    transitionDuration?: number;
    /** Label rendered inside the circle */
    label?: React.ReactNode;
    /** Label position relative to the circle center @default 'bottom' */
    labelPosition?: 'center' | 'bottom';
}
export type SemiCircleProgressFactory = Factory<{
    props: SemiCircleProgressProps;
    ref: HTMLDivElement;
    stylesNames: SemiCircleProgressStylesNames;
    vars: SemiCircleProgressCssVariables;
}>;
export declare const SemiCircleProgress: import("../..").MantineComponent<{
    props: SemiCircleProgressProps;
    ref: HTMLDivElement;
    stylesNames: SemiCircleProgressStylesNames;
    vars: SemiCircleProgressCssVariables;
}>;