Progress Circle

Круговой прогресс: кольцо плавно доходит до значения или крутится в ожидании. Бесплатно, MIT · Базовые элементы › Загрузка

Установка

npx valyro-cli@latest add progress-circle

npx shadcn@latest add https://valyro.xyz/r/progress-circle.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { ProgressCircle } from 'valyro-ui';

Prop	Type	Default
`value`	`number`		Omit (or pass a non-finite number) for an indeterminate ring.
`max`	`number`	`100`	Value of a full ring; `value` is clamped to 0…max. A non-positive or non-finite max falls back to 100.
`size`	`'sm' \| 'md' \| 'lg' \| number`	`'md'`	Diameter: `sm` 24px, `md` 40px, `lg` 64px, or a number of pixels.
`thickness`	`number`		Ring width in pixels. Default: the theme's share of the diameter (`--ui-progress-circle-thickness`, 10 %).
`color`	`'accent' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	`'accent'`	Ring colour: the theme accent, a status colour, or the foreground (`neutral`).
`label`	`ReactNode`		Caption under the ring; also names the progressbar unless `aria-label` is given.
`hideLabel`	`boolean`	`false`	Keep `label` as the accessible name only, without showing it.
`showValue`	`boolean \| ReactNode`		Text in the centre: `true` shows the formatted value, a node shows itself (e.g. "3/5"), `false` nothing. Default: the value on `md` and larger rings, nothing on `sm`.
`formatValue`	`(value: number, max: number) => string`		Custom value text (shown and announced), e.g. "3 of 8 files".
`locale`	`string`		Locale for the percentage (default: the ThemeProvider's, then the browser's).
`animation`	`'default' \| 'spring'`	`'default'`	`spring`: the arc springs to each new value and the shown number counts along with it. `default`: the theme's ease.