VibeUI
РусEng
Войти

Загрузка

Сегментный циферблат

Круговой индикатор процента из отдельных делений-«тиков», как измерительный прибор, а не гладкая заливка дуги — осознанная альтернатива conic-gradient.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • долю через value от 0 до 100
  • подпись действия через label
  • число делений через segments

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Сегментный циферблат — Круговой индикатор процента из отдельных делений-«тиков», как измерительный прибор, а не гладкая заливка дуги — осознанная альтернатива conic-gradient.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/spinner-011?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Как использовать

<Spinner011 value={42} label="Обрабатываем видео" segments={24} />

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Значение, %
value · по умолчанию: 42
Подпись
label · по умолчанию: Обрабатываем видео
Делений
segments · по умолчанию: 24
Размер
size · по умолчанию: md
Вторая строка
hintTemplate · по умолчанию: Готово {value} из 100
Фон
background · по умолчанию: цвет темы

Ещё в разделе «Загрузка»

Частые вопросы

Как установить компонент «Сегментный циферблат» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Сегментный циферблат»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Сегментный циферблат»?
Можно менять: долю через value от 0 до 100; подпись действия через label; число делений через segments. Сохранить как есть: локальную палитру --vibeui-spinner-011-* и не подменять её токенами вашей темы; деления вместо гладкой дуги — это другой визуальный язык, механический циферблат, а не заливка; число поверх циферблата отдельным узлом, чтобы оно не терялось среди делений.
Компонент «Сегментный циферблат» бесплатный?
Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/spinner-011.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Серверный компонент, хуков нет. В отличие от кольца на conic-gradient, здесь циферблат собран из отдельных делений: каждое — короткая палочка, повёрнутая на свой угол через transform-origin в центре круга и inline-стиль rotate(), посчитанный в компоненте. Количество закрашенных делений считается от доли value. Число лежит поверх циферблата отдельным узлом. Значение зажимается в 0–100 и объявляется через role="progressbar" с aria-valuenow, valuemin и valuemax. Цифры моноширинные, чтобы подпись не дёргалась при обновлении. Тема берётся из color-scheme окружения через light-dark(): подложки у компонента нет по умолчанию — он лежит на фоне страницы и темнеет вместе с ней, а плашку включает проп background.

Теги

  • spinner
  • progress
  • dial
  • percent
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…