# Training Status Popover

> A premium model training-status popover: a gradient progress ring with live percentage count-up, a running status badge with pulsing dot, an epoch segment strip with ETA, live loss/accuracy/step metric tiles and pause / view-logs actions, revealed from a trigger with staggered entrance.

- Category: Popover
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Tensor
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: progress, ai, visualization
- Page: https://builder.atheros.ai/components/training-status
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_training_status/preview-0c7fc56dc23b.webp

## Features

- Trigger button with live-run indicator dot that toggles an anchored training-status popover
- Figtree SVG progress ring with gradient stroke, built at runtime, drawn in with a percentage count-up on every open
- Status badge (running / completed / failed) with the same height and radius contract as the action buttons
- Epoch segment strip: completed, pulsing-active and upcoming epochs plus ETA readout
- Live metric tiles for loss (with trend icon), accuracy and step, ticking via a gentle run simulation
- Staggered section entrance animation with a springy rise for the panel
- Pause (ghost) and View Logs (solid accent, AA-safe) action buttons with Tabler icons
- Click outside the popover or press Escape to dismiss it
- Responsive down to 272px
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Dialog role** — The popover uses `role="dialog"` with an `aria-label`
- **Trigger semantics** — The trigger has `aria-haspopup`, `aria-expanded` and `aria-controls`
- **Action labels** — Pause and view-logs buttons carry `aria-label`
- **Decorative visuals** — The ring and status dot are `aria-hidden`
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations
- **Progressbar** — The ring uses `role="progressbar"` with `aria-valuenow` kept in sync

## Keyboard shortcuts

- `Escape` — Close the popover and restore focus to the trigger

## Common questions

**Which frameworks is Training Status Popover available in?**

Training Status Popover ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Training Status Popover free?**

Training Status Popover is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Training Status Popover support dark mode?**

Yes. Training Status Popover ships light and dark themes, both drawn from the Tensor design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Training Status Popover live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/training-status

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt