← Back to Playground

📊 Animated Skills Bar

A CSS-only animated progress bar component showcasing skill proficiency levels.

Skills overview:
HTML 80%
CSS 75%
JavaScript 35%
Stoicism 95%

About This Component

This animated skills bar is built entirely with HTML <progress> elements and CSS — no JavaScript required. It demonstrates how native browser elements combined with CSS custom properties can create polished, accessible UI components.

Key Features

  • Uses the semantic <progress> HTML element for accessibility
  • Smooth animated fill using CSS keyframes
  • Respects the site's light/dark theme via CSS custom properties
  • Fully responsive layout with CSS Grid
  • No JavaScript dependency — pure HTML and CSS