VibeUI

Display

Travelling Value Bubble

A bar whose number rides above the end of the fill: the eye no longer has to link a distant caption to the track, and clamp keeps the bubble inside the card at zero and a hundred percent.

  • progress
  • bar
  • label
  • display

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.

put this in the header: https://vibeui.ru/c/progress-009?lang=en

Профиль заполнен

Add a phone number and a photo

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "progress-009" (Travelling Value Bubble) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/progress-009.json

Registry item: https://vibeui.ru/r/progress-009.json
Installs to: components/vibeui/progress-009.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
A bar whose number rides above the end of the fill: the eye no longer has to link a distant caption to the track, and clamp keeps the bubble inside the card at zero and a hundred percent.

A bar with a value bubble above the end of the fill: the position is computed with clamp and the number is duplicated visually only. Zero dependencies, one file, server rendered.

## 3. How to use it
import { Progress009 } from "@/components/vibeui/progress-009"

<Progress009
  value={68}
  label="Profile completeness"
  caption="Add a phone number and a photo"
/>

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the local --vibeui-progress-009-* palette — do not swap it for your theme tokens
- the clamp in the bubble position: without it zero and a hundred percent push it out of the card
- the aria-hidden on the bubble number — otherwise the value is read out twice
- the top padding on the rail: the bubble lives in that gap and would cover the heading without it
- the tabular figures in the bubble: otherwise its width jumps on every update
- the card's own light surface: without it the dark text disappears on a dark background

## 6. You may change
- the ratio through value
- the heading through label
- the explanation under the bar through caption
- the fill and bubble colour through the accent variable

## 7. Rules
- The bubble overlaps vertical neighbours: do not stack two of these blocks tightly.
- Below 12rem wide the bubble almost always hits the clamp and stops indicating position.
- value is clamped to 0–100: this variant cannot display anything above a hundred.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.

For developers

npx shadcn@latest add https://vibeui.ru/r/progress-009.json
https://vibeui.ru/r/progress-009.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-progress-009-*. Серверный: хуков нет. Пузырёк позиционируется абсолютно по left от переменной значения и центрируется translateX(−50%); crop у краёв снимает clamp с границами в 1.5rem, поэтому у нуля и ста процентов он остаётся внутри карточки. Хвостик пузырька — псевдоэлемент с треугольником на бордюрах, отдельной картинки не нужно. Число в пузырьке помечено aria-hidden: его уже сообщает aria-valuenow дорожки, и без этого скринридер прочитал бы значение дважды.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Progress009Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children"
> & {
  value?: number
  label?: string
  caption?: string
}

// Идея компонента: число стоит не в углу, а над концом заливки — глазу не
// нужно связывать далеко разнесённые подпись и полосу. Пузырёк едет по
// дорожке на left и прижимается clamp'ом к краям, поэтому у нуля и у ста
// процентов он не вылезает за границу карточки.
const STYLES = `
:where([data-vibeui-block="progress-009"]){
--vibeui-progress-009-bg:oklch(1 0 0);
--vibeui-progress-009-fg:oklch(0.24 0.016 265);
--vibeui-progress-009-muted:oklch(0.56 0.014 265);
--vibeui-progress-009-border:oklch(0.9 0.006 265);
--vibeui-progress-009-track:oklch(0.93 0.005 265);
--vibeui-progress-009-accent:oklch(0.52 0.2 292);
--vibeui-progress-009-value:0;
--vibeui-progress-009-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="progress-009"]{
display:flex;flex-direction:column;gap:0.5rem;
width:100%;max-width:24rem;box-sizing:border-box;padding:1rem 1.125rem 1.125rem;
background:var(--vibeui-progress-009-bg);
border:1px solid var(--vibeui-progress-009-border);border-radius:0.875rem;
font-family:var(--vibeui-progress-009-font);color:var(--vibeui-progress-009-fg);
}
[data-vibeui-block="progress-009"] [data-part="label"]{
font-size:0.8125rem;font-weight:650;
}
[data-vibeui-block="progress-009"] [data-part="rail"]{
position:relative;padding-top:1.75rem;
}
/* Пузырёк едет вместе с заливкой, clamp держит его внутри дорожки. */
[data-vibeui-block="progress-009"] [data-part="bubble"]{
position:absolute;top:0;
left:clamp(1.5rem,calc(var(--vibeui-progress-009-value) * 1%),calc(100% - 1.5rem));
transform:translateX(-50%);
padding:0.1875rem 0.4375rem;border-radius:0.375rem;
background:var(--vibeui-progress-009-accent);color:oklch(1 0 0);
font-size:0.75rem;font-weight:700;line-height:1.2;
font-variant-numeric:tabular-nums;white-space:nowrap;
transition:left .3s cubic-bezier(.32,.72,0,1);
}
[data-vibeui-block="progress-009"] [data-part="bubble"]::after{
content:"";position:absolute;left:50%;top:100%;
width:0;height:0;margin-left:-0.25rem;
border:0.25rem solid transparent;
border-top-color:var(--vibeui-progress-009-accent);
}
[data-vibeui-block="progress-009"] [data-part="track"]{
height:0.5rem;border-radius:9999px;overflow:hidden;
background:var(--vibeui-progress-009-track);
}
[data-vibeui-block="progress-009"] [data-part="bar"]{
height:100%;border-radius:inherit;
width:calc(var(--vibeui-progress-009-value) * 1%);
background:linear-gradient(90deg,color-mix(in oklch,var(--vibeui-progress-009-accent) 60%,oklch(1 0 0)),var(--vibeui-progress-009-accent));
transition:width .3s cubic-bezier(.32,.72,0,1);
}
[data-vibeui-block="progress-009"] [data-part="caption"]{
margin:0;font-size:0.75rem;color:var(--vibeui-progress-009-muted);
}
@media (prefers-reduced-motion:reduce){
[data-vibeui-block="progress-009"] *{animation:none!important;transition:none!important}
}
`

/**
 * Полоса, у которой число едет над концом заливки.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Progress009({
  value = 68,
  label = "Профиль заполнен",
  caption = "Осталось добавить телефон и фотографию",
  className,
  style,
  ...props
}: Progress009Props) {
  const percent = Math.min(100, Math.max(0, value))
  const palette = {
    "--vibeui-progress-009-value": percent,
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-progress-009" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="progress-009"
        className={className}
        style={palette}
      >
        <span data-part="label">{label}</span>
        <div data-part="rail">
          <span data-part="bubble" aria-hidden="true">
            {Math.round(percent)}%
          </span>
          <div
            data-part="track"
            role="progressbar"
            aria-label={label}
            aria-valuemin={0}
            aria-valuemax={100}
            aria-valuenow={Math.round(percent)}
          >
            <div data-part="bar" />
          </div>
        </div>
        <p data-part="caption">{caption}</p>
      </div>
    </>
  )
}