@progress/kendo-react-indicators
Version:
React Indicators offer an interface to represent a visual indication for their UI elements. KendoReact Indicators package
80 lines (79 loc) • 2.36 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
/**
* Represents the props of the [KendoReact Skeleton component](https://www.telerik.com/kendo-react-ui/components/indicators/skeleton).
*/
export interface SkeletonProps {
/**
* Specifies a list of CSS classes that will be added to the Skeleton.
*
* @example
* ```jsx
* <Skeleton className="custom-class" />
* ```
*/
className?: string;
/**
* Sets additional CSS styles to the Skeleton.
*
* @example
* ```jsx
* <Skeleton style={{ backgroundColor: 'red' }} />
* ```
*/
style?: React.CSSProperties;
/**
* Specifies the animation settings of the Skeleton.
*
* The possible keys are:
* * `type`—Defines the type of the Skeleton animation.
* * `wave`—Shows wave animation effect.
* * `pulse`(Default)—Shows pulse animation effect.
*
* To disable the animation, set the property to `false`.
*
* @example
* ```jsx
* <Skeleton animation={{ type: 'wave' }} />
* ```
*/
animation?: boolean | SkeletonAnimation;
/**
* Specifies the shape of the Skeleton.
*
* The possible values are:
* * `circle`—Renders a circular Skeleton.
* * `text`(Default)—Renders a line Skeleton.
* * `rectangle`—Renders a rectangular Skeleton.
*
* @example
* ```jsx
* <Skeleton shape="circle" />
* ```
*/
shape?: SkeletonShape;
}
/**
* Specifies the shape of the Skeleton.
*
* The possible values are:
* * `circle`—Renders a circular Skeleton.
* * `text`(Default)—Renders a line Skeleton.
* * `rectangle`—Renders a rectangular Skeleton.
*
*/
export type SkeletonShape = 'circle' | 'text' | 'rectangle';
/**
* Specifies the animation settings of the Skeleton.
*/
export interface SkeletonAnimation {
/**
* Specifies the type of the Skeleton animation. Defaults to `pulse`.
*/
type?: 'wave' | 'pulse';
}