Progress Steps

A small vanilla HTML/CSS/JS component that displays a multi-step progress indicator with Prev/Next controls.

Run locally

• Open index.html in your browser, or
• Use any static server (recommended) and open the served page.

Example (VS Code Live Server):

• Install the Live Server extension
• Right-click index.html → Open with Live Server

Features

• Step progress UI with an animated progress bar
• Prev/Next navigation with proper disabled states
• Accessibility improvements
  • Progress bar exposes its value (role="progressbar" + aria-valuenow)
  • Current step is marked with aria-current="step"
  • Screen-reader announcements via a polite live region (Step X of Y)
  • Visible keyboard focus styling via :focus-visible

Project structure

• index.html — markup
• style.css — styling
• script.js — behavior

---

Made with ♥ by Meet Parmar