Progress Glow

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

Customise it with AI

Open Progress Glow in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the progress is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.