Skip to content

Latest commit

 

History

History
31 lines (22 loc) · 931 Bytes

File metadata and controls

31 lines (22 loc) · 931 Bytes

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.htmlOpen 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