# Progress Glow

> A neon determinate progress bar on a synth grid console — a luminous gradient fill trailed by a glowing comet head and a pulsing halo, framed by a live deploy readout (stage line, step pips, transferred / rate / ETA meta).

- Category: Progress
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Atlas
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: progress-bar, glow
- Page: https://builder.atheros.ai/components/progress-glow
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_progress_glow/preview-c4017ff7e8a4.webp

## Features

- A single prominent determinate progress bar with a luminous fuchsia-to-cyan gradient fill
- A glowing comet head riding the fill edge with a pulsing halo ring (transform + opacity only)
- A compact deploy readout: eyebrow + title, big percentage, a live stage line with a pulsing status dot, a 4-step pip strip, and a meta row (transferred GB / rate / ETA)
- Slow ambient auto-progress — the value creeps toward 100 with decelerating easing, holds at "Live", then gracefully rewinds to a fresh deploy; every readout derives from one state value
- Value changes animate via `transform: scaleX()` on the fill and `translateX()` on the comet rider — never width
- Synth grid console stage: a flat neon fuchsia/cyan grid background that dissolves toward the edges
- Gradient hairline console frame: a fuchsia-to-cyan edge wrapping the compact surface panel (~25rem)
- `role="progressbar"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax` and an `aria-label` carrying the stage + percent, kept in sync by JS
- Reduced-motion support that pauses the auto-progress and halo pulse and shows a static state

## Accessibility

- **ARIA role** — The bar uses `role="progressbar"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
- **Live value** — JS updates `aria-valuenow` and the bar's `aria-label` (title, stage, step count, percent) on every render
- **Decorative value** — The visible percentage, stage line, pips and meta are `aria-hidden` / decorative — announced via the bar's aria attributes
- **Focus indicators** — `:focus-visible` with `--ring` outline
- **Reduced motion** — `prefers-reduced-motion: reduce` pauses the ambient auto-progress and halo pulse and neutralizes transitions (static readout)
- **Viewport** — `100dvh` for mobile-safe viewport height

## Common questions

**Which frameworks is Progress Glow available in?**

Progress Glow 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 Progress Glow free?**

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

**Does Progress Glow support dark mode?**

Yes. Progress Glow ships light and dark themes, both drawn from the Atlas design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Progress Glow 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/progress-glow

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