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

React components library focused on usability, accessibility and developer experience

import { BoxProps, DataAttributes, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
export interface RingProgressSection extends React.ComponentProps<'circle'>, DataAttributes {
    value: number;
    color: MantineColor;
    tooltip?: React.ReactNode;
}
export type RingProgressStylesNames = 'root' | 'svg' | 'label' | 'curve';
export type RingProgressCssVariables = {
    root: '--rp-size' | '--rp-label-offset' | '--rp-transition-duration';
    svg: '--rp-start-angle';
};
export interface RingProgressProps extends BoxProps, StylesApiProps<RingProgressFactory>, ElementProps<'div'> {
    /** Label displayed in the center of the ring */
    label?: React.ReactNode;
    /** Ring thickness in pixels. Cannot exceed size / 4 and will be automatically clamped if necessary @default 12 */
    thickness?: number;
    /** Width and height of the progress ring @default 120 */
    size?: number;
    /** Applies rounded line caps to the start and end of visible sections @default false */
    roundCaps?: boolean;
    /**
     * Array of sections to display in the ring. Each section should have a `value` (0-100),
     * `color`, and optional `tooltip`. Sections can also receive any valid SVG circle element props.
     */
    sections: RingProgressSection[];
    /** Color of the unfilled portion of the ring (background). Defaults to gray-2 in light mode, dark-4 in dark mode */
    rootColor?: MantineColor;
    /** Transition duration in milliseconds for section value and color changes @default 0 */
    transitionDuration?: number;
    /** Gap between sections in degrees. Reduces the visual size of each section @default 0 */
    sectionGap?: number;
    /** Starting angle in degrees. 0 = right, 90 = bottom, 180 = left, 270 = top @default 270 */
    startAngle?: number;
}
export type RingProgressFactory = Factory<{
    props: RingProgressProps;
    ref: HTMLDivElement;
    stylesNames: RingProgressStylesNames;
    vars: RingProgressCssVariables;
}>;
export declare const RingProgress: import("../..").MantineComponent<{
    props: RingProgressProps;
    ref: HTMLDivElement;
    stylesNames: RingProgressStylesNames;
    vars: RingProgressCssVariables;
}>;