@limetech/lime-elements
Version:
54 lines • 2.1 kB
TypeScript
import { CircularProgressSize } from '../circular-progress/circular-progress.types';
/**
* The circular progress component can be used to visualize the curent state of
* a progress in a scale; for example percentage of completion of a task.
*
* Its compact UI makes the component suitable when there is not enough screen
* space available to visualise such information.
*
* This component allows you to define your scale, from `0` to a desired
* `maxValue`; and also lets you chose a proper `suffix` for your scale.
*
* :::note
* The component will round up the value when it is displayed, and only shows
* one decimal digit.
* It also abbreviates large numbers. For example 1234 will be displayed as 1.2k.
* Of course such numbers, if bigger than `maxValue` will be visualized as a
* full progress.
* :::
*
* @exampleComponent limel-example-circular-progress
* @exampleComponent limel-example-circular-progress-sizes
* @exampleComponent limel-example-circular-progress-props
* @exampleComponent limel-example-circular-progress-css-variables
* @exampleComponent limel-example-circular-progress-percentage-colors
*/
export declare class CircularProgress {
/**
* The value of the progress bar.
*/
value: number;
/**
* The maximum value within the scale that the progress bar should visualize. Defaults to `100`.
*/
maxValue: number;
/**
* The prefix which is displayed before the `value`, must be a few characters characters long.
*/
prefix?: string;
/**
* The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
*/
suffix: string;
/**
* When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
*/
displayPercentageColors: boolean;
/**
* Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified.
*/
size: CircularProgressSize;
render(): any;
private renderPrefix;
}
//# sourceMappingURL=circular-progress.d.ts.map