Performance Meter

HR performance visualization with circular gauge, category breakdown bars, trend indicators, goal tracking, and period selector.

Full Performance Meter

Preview

Sofia Garcia

Senior Product Designer

ERPlora — Design Team

Q4 2025

4.3 /5.0

Overall

Excellent +0.4 from last quarter

Target 4.0

Actual 4.3

Diff +0.3

Category Breakdown

Productivity

4.5 +0.3

Teamwork

4.2 +0.5

Communication

4.0 0.0

Innovation

4.7 +0.8

Reliability

3.5 -0.2

<div class="performance-meter performance-meter-animated">
  <!-- Header -->
  <div class="performance-meter-header">
    <div class="performance-meter-avatar">SG</div>
    <div class="performance-meter-employee-info">
      <p class="performance-meter-employee-name">Sofia Garcia</p>
      <p class="performance-meter-employee-role">Senior Product Designer</p>
      <p class="performance-meter-employee-department">ERPlora &mdash; Design Team</p>
    </div>
    <span class="performance-meter-period-badge">
      <svg style="width:14px;height:14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
      Q4 2025
    </span>
  </div>

  <!-- Score gauge -->
  <div class="performance-meter-score-section">
    <div class="performance-meter-score-gauge">
      <svg class="performance-meter-score-svg" viewBox="0 0 120 120">
        <circle class="performance-meter-score-track" cx="60" cy="60" r="52" />
        <circle class="performance-meter-score-fill performance-meter-score-fill-excellent"
                cx="60" cy="60" r="52"
                stroke-dasharray="326.73"
                stroke-dashoffset="49"
                style="--perf-circumference: 326.73;" />
      </svg>
      <div class="performance-meter-score-value">
        <span class="performance-meter-score-number">4.3</span>
        <span class="performance-meter-score-max">/5.0</span>
        <div class="performance-meter-score-label">Overall</div>
      </div>
    </div>
    <div class="performance-meter-score-summary">
      <span class="performance-meter-score-status performance-meter-score-status-excellent">
        <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        Excellent
      </span>
      <span class="performance-meter-trend performance-meter-trend-up">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 6l-9.5 9.5-5-5L1 18"/><path d="M17 6h6v6"/></svg>
        +0.4 from last quarter
      </span>
    </div>
  </div>

  <!-- Goal section -->
  <div class="performance-meter-goal-section">
    <div class="performance-meter-goal-item">
      <span class="performance-meter-goal-label">Target</span>
      <span class="performance-meter-goal-value">4.0</span>
    </div>
    <div class="performance-meter-goal-divider"></div>
    <div class="performance-meter-goal-item">
      <span class="performance-meter-goal-label">Actual</span>
      <span class="performance-meter-goal-value">4.3</span>
    </div>
    <div class="performance-meter-goal-divider"></div>
    <div class="performance-meter-goal-item">
      <span class="performance-meter-goal-label">Diff</span>
      <span class="performance-meter-goal-diff performance-meter-goal-diff-positive">+0.3</span>
    </div>
  </div>

  <!-- Categories -->
  <div class="performance-meter-categories">
    <h4 class="performance-meter-categories-title">Category Breakdown</h4>

    <div class="performance-meter-category">
      <div class="performance-meter-category-header">
        <span class="performance-meter-category-name">
          <span class="performance-meter-category-icon">
            <svg style="width:100%;height:100%;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
          </span>
          Productivity
        </span>
        <div class="performance-meter-category-score">
          <span class="performance-meter-category-value">4.5</span>
          <span class="performance-meter-category-trend performance-meter-category-trend-up">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 15l-6-6-6 6"/></svg>
            +0.3
          </span>
        </div>
      </div>
      <div class="performance-meter-category-bar">
        <div class="performance-meter-category-fill performance-meter-category-fill-excellent" style="width:90%;"></div>
      </div>
    </div>

    <div class="performance-meter-category">
      <div class="performance-meter-category-header">
        <span class="performance-meter-category-name">
          <span class="performance-meter-category-icon">
            <svg style="width:100%;height:100%;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
          </span>
          Teamwork
        </span>
        <div class="performance-meter-category-score">
          <span class="performance-meter-category-value">4.2</span>
          <span class="performance-meter-category-trend performance-meter-category-trend-up">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 15l-6-6-6 6"/></svg>
            +0.5
          </span>
        </div>
      </div>
      <div class="performance-meter-category-bar">
        <div class="performance-meter-category-fill performance-meter-category-fill-good" style="width:84%;"></div>
      </div>
    </div>

    <div class="performance-meter-category">
      <div class="performance-meter-category-header">
        <span class="performance-meter-category-name">
          <span class="performance-meter-category-icon">
            <svg style="width:100%;height:100%;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
          </span>
          Communication
        </span>
        <div class="performance-meter-category-score">
          <span class="performance-meter-category-value">4.0</span>
          <span class="performance-meter-category-trend performance-meter-category-trend-neutral">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/></svg>
            0.0
          </span>
        </div>
      </div>
      <div class="performance-meter-category-bar">
        <div class="performance-meter-category-fill performance-meter-category-fill-good" style="width:80%;"></div>
      </div>
    </div>

    <div class="performance-meter-category">
      <div class="performance-meter-category-header">
        <span class="performance-meter-category-name">
          <span class="performance-meter-category-icon">
            <svg style="width:100%;height:100%;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
          </span>
          Innovation
        </span>
        <div class="performance-meter-category-score">
          <span class="performance-meter-category-value">4.7</span>
          <span class="performance-meter-category-trend performance-meter-category-trend-up">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 15l-6-6-6 6"/></svg>
            +0.8
          </span>
        </div>
      </div>
      <div class="performance-meter-category-bar">
        <div class="performance-meter-category-fill performance-meter-category-fill-excellent" style="width:94%;"></div>
      </div>
    </div>

    <div class="performance-meter-category">
      <div class="performance-meter-category-header">
        <span class="performance-meter-category-name">
          <span class="performance-meter-category-icon">
            <svg style="width:100%;height:100%;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
          </span>
          Reliability
        </span>
        <div class="performance-meter-category-score">
          <span class="performance-meter-category-value">3.5</span>
          <span class="performance-meter-category-trend performance-meter-category-trend-down">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
            -0.2
          </span>
        </div>
      </div>
      <div class="performance-meter-category-bar">
        <div class="performance-meter-category-fill performance-meter-category-fill-average" style="width:70%;"></div>
      </div>
    </div>
  </div>

  <!-- Period selector -->
  <div class="performance-meter-period-selector">
    <button class="performance-meter-period-btn">Q1</button>
    <button class="performance-meter-period-btn">Q2</button>
    <button class="performance-meter-period-btn">Q3</button>
    <button class="performance-meter-period-btn performance-meter-period-btn-active">Q4</button>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-4 p-6 bg-base-100 border border-base-300 rounded-box">
  <!-- Header -->
  <div class="flex items-center gap-4 pb-4 border-b border-base-300">
    <div class="w-14 h-14 rounded-full bg-neutral text-neutral-content flex items-center justify-center font-semibold text-xl shrink-0">SG</div>
    <div class="flex-1 min-w-0">
      <p class="font-semibold text-lg m-0 leading-tight">Sofia Garcia</p>
      <p class="text-sm text-base-content/60 m-0">Senior Product Designer</p>
      <p class="text-xs text-base-content/40 m-0">ERPlora &mdash; Design Team</p>
    </div>
    <span class="inline-flex items-center gap-1 px-3 py-1.5 bg-base-200 rounded-full text-xs font-medium text-base-content/60">Q4 2025</span>
  </div>
  <!-- Gauge area -->
  <div class="flex items-center justify-center gap-8 py-4">
    <div class="relative w-30 h-30">
      <svg class="w-full h-full -rotate-90" viewBox="0 0 120 120">
        <circle fill="none" stroke="var(--color-base-200)" stroke-width="10" cx="60" cy="60" r="52"/>
        <circle fill="none" stroke="var(--color-success)" stroke-width="10" stroke-linecap="round" cx="60" cy="60" r="52" stroke-dasharray="326.73" stroke-dashoffset="49"/>
      </svg>
      <div class="absolute inset-0 flex flex-col items-center justify-center">
        <span class="text-3xl font-bold tabular-nums">4.3</span>
        <span class="text-sm font-medium text-base-content/40">/5.0</span>
      </div>
    </div>
    <div class="flex flex-col gap-2">
      <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-semibold bg-success/10 text-success">Excellent</span>
      <span class="inline-flex items-center gap-1 text-sm font-medium text-success">+0.4 from last quarter</span>
    </div>
  </div>
  <!-- Category bars -->
  <div class="flex flex-col gap-4">
    <h4 class="font-semibold text-sm pb-1 border-b border-base-300 m-0">Category Breakdown</h4>
    <div class="flex flex-col gap-1.5">
      <div class="flex justify-between text-sm"><span class="font-medium">Productivity</span><span class="font-semibold tabular-nums">4.5</span></div>
      <div class="h-2 bg-base-200 rounded-full overflow-hidden"><div class="h-full bg-success rounded-full" style="width:90%"></div></div>
    </div>
    <div class="flex flex-col gap-1.5">
      <div class="flex justify-between text-sm"><span class="font-medium">Teamwork</span><span class="font-semibold tabular-nums">4.2</span></div>
      <div class="h-2 bg-base-200 rounded-full overflow-hidden"><div class="h-full bg-primary rounded-full" style="width:84%"></div></div>
    </div>
    <div class="flex flex-col gap-1.5">
      <div class="flex justify-between text-sm"><span class="font-medium">Communication</span><span class="font-semibold tabular-nums">4.0</span></div>
      <div class="h-2 bg-base-200 rounded-full overflow-hidden"><div class="h-full bg-primary rounded-full" style="width:80%"></div></div>
    </div>
    <div class="flex flex-col gap-1.5">
      <div class="flex justify-between text-sm"><span class="font-medium">Innovation</span><span class="font-semibold tabular-nums">4.7</span></div>
      <div class="h-2 bg-base-200 rounded-full overflow-hidden"><div class="h-full bg-success rounded-full" style="width:94%"></div></div>
    </div>
    <div class="flex flex-col gap-1.5">
      <div class="flex justify-between text-sm"><span class="font-medium">Reliability</span><span class="font-semibold tabular-nums">3.5</span></div>
      <div class="h-2 bg-base-200 rounded-full overflow-hidden"><div class="h-full bg-warning rounded-full" style="width:70%"></div></div>
    </div>
  </div>
  <!-- Period selector -->
  <div class="flex gap-1 p-1 bg-base-200 rounded-lg">
    <button class="flex-1 py-2 px-3 text-sm font-medium text-base-content/60 rounded">Q1</button>
    <button class="flex-1 py-2 px-3 text-sm font-medium text-base-content/60 rounded">Q2</button>
    <button class="flex-1 py-2 px-3 text-sm font-medium text-base-content/60 rounded">Q3</button>
    <button class="flex-1 py-2 px-3 text-sm font-medium bg-base-100 shadow-sm rounded">Q4</button>
  </div>
</div>

Requires: tw.min.css

// Animate gauge on load
function setGaugeScore(el, score, max = 5) {
  const radius = 52;
  const circumference = 2 * Math.PI * radius; // ~326.73
  const pct = score / max;
  const offset = circumference * (1 - pct);
  const fill = el.querySelector('.performance-meter-score-fill');
  fill.style.strokeDasharray = circumference;
  fill.style.strokeDashoffset = offset;

  const number = el.querySelector('.performance-meter-score-number');
  number.textContent = score.toFixed(1);
}

// Period selector
document.querySelectorAll('.performance-meter-period-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const selector = btn.closest('.performance-meter-period-selector');
    selector.querySelectorAll('.performance-meter-period-btn').forEach(b =>
      b.classList.remove('performance-meter-period-btn-active')
    );
    btn.classList.add('performance-meter-period-btn-active');
    // Fetch data for the selected period and update gauge + bars
  });
});

Compact Variant

Preview

Roberto Herrera

Backend Developer

Q4 2025

3.8 /5

Good +0.2

Productivity

4.0

Teamwork

3.6

Code Quality

3.8

<div class="performance-meter performance-meter-compact">
  <div class="performance-meter-header">
    <div class="performance-meter-avatar">RH</div>
    <div class="performance-meter-employee-info">
      <p class="performance-meter-employee-name">Roberto Herrera</p>
      <p class="performance-meter-employee-role">Backend Developer</p>
    </div>
    <span class="performance-meter-period-badge">Q4 2025</span>
  </div>

  <div class="performance-meter-score-section">
    <div class="performance-meter-score-gauge">
      <svg class="performance-meter-score-svg" viewBox="0 0 120 120">
        <circle class="performance-meter-score-track" cx="60" cy="60" r="52" />
        <circle class="performance-meter-score-fill performance-meter-score-fill-good"
                cx="60" cy="60" r="52"
                stroke-dasharray="326.73"
                stroke-dashoffset="80" />
      </svg>
      <div class="performance-meter-score-value">
        <span class="performance-meter-score-number">3.8</span>
        <span class="performance-meter-score-max">/5</span>
      </div>
    </div>
    <div class="performance-meter-score-summary">
      <span class="performance-meter-score-status performance-meter-score-status-good">Good</span>
      <span class="performance-meter-trend performance-meter-trend-up">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 6l-9.5 9.5-5-5L1 18"/><path d="M17 6h6v6"/></svg>
        +0.2
      </span>
    </div>
  </div>

  <div class="performance-meter-categories">
    <div class="performance-meter-category">
      <div class="performance-meter-category-header">
        <span class="performance-meter-category-name">Productivity</span>
        <div class="performance-meter-category-score">
          <span class="performance-meter-category-value">4.0</span>
        </div>
      </div>
      <div class="performance-meter-category-bar">
        <div class="performance-meter-category-fill performance-meter-category-fill-good" style="width:80%;"></div>
      </div>
    </div>
    <div class="performance-meter-category">
      <div class="performance-meter-category-header">
        <span class="performance-meter-category-name">Teamwork</span>
        <div class="performance-meter-category-score">
          <span class="performance-meter-category-value">3.6</span>
        </div>
      </div>
      <div class="performance-meter-category-bar">
        <div class="performance-meter-category-fill performance-meter-category-fill-average" style="width:72%;"></div>
      </div>
    </div>
    <div class="performance-meter-category">
      <div class="performance-meter-category-header">
        <span class="performance-meter-category-name">Code Quality</span>
        <div class="performance-meter-category-score">
          <span class="performance-meter-category-value">3.8</span>
        </div>
      </div>
      <div class="performance-meter-category-bar">
        <div class="performance-meter-category-fill performance-meter-category-fill-good" style="width:76%;"></div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-2 p-4 bg-base-100 border border-base-300 rounded-box">
  <div class="flex items-center gap-4 pb-2 border-b border-base-300">
    <div class="w-10 h-10 rounded-full bg-neutral text-neutral-content flex items-center justify-center font-semibold shrink-0">RH</div>
    <div class="flex-1 min-w-0">
      <p class="font-semibold m-0">Roberto Herrera</p>
      <p class="text-sm text-base-content/60 m-0">Backend Developer</p>
    </div>
    <span class="px-3 py-1 bg-base-200 rounded-full text-xs font-medium text-base-content/60">Q4 2025</span>
  </div>
  <div class="flex items-center justify-center gap-6 py-2">
    <div class="relative w-20 h-20">
      <svg class="w-full h-full -rotate-90" viewBox="0 0 120 120">
        <circle fill="none" stroke="var(--color-base-200)" stroke-width="8" cx="60" cy="60" r="52"/>
        <circle fill="none" stroke="var(--color-primary)" stroke-width="8" stroke-linecap="round" cx="60" cy="60" r="52" stroke-dasharray="326.73" stroke-dashoffset="80"/>
      </svg>
      <div class="absolute inset-0 flex flex-col items-center justify-center">
        <span class="text-2xl font-bold tabular-nums">3.8</span>
        <span class="text-xs text-base-content/40">/5</span>
      </div>
    </div>
    <div class="flex flex-col gap-1">
      <span class="inline-flex px-2 py-1 rounded-full text-sm font-semibold bg-primary/10 text-primary">Good</span>
      <span class="text-sm font-medium text-success">+0.2</span>
    </div>
  </div>
  <div class="flex flex-col gap-3">
    <div class="flex flex-col gap-1">
      <div class="flex justify-between text-sm"><span class="font-medium">Productivity</span><span class="font-semibold">4.0</span></div>
      <div class="h-2 bg-base-200 rounded-full overflow-hidden"><div class="h-full bg-primary rounded-full" style="width:80%"></div></div>
    </div>
    <div class="flex flex-col gap-1">
      <div class="flex justify-between text-sm"><span class="font-medium">Teamwork</span><span class="font-semibold">3.6</span></div>
      <div class="h-2 bg-base-200 rounded-full overflow-hidden"><div class="h-full bg-warning rounded-full" style="width:72%"></div></div>
    </div>
    <div class="flex flex-col gap-1">
      <div class="flex justify-between text-sm"><span class="font-medium">Code Quality</span><span class="font-semibold">3.8</span></div>
      <div class="h-2 bg-base-200 rounded-full overflow-hidden"><div class="h-full bg-primary rounded-full" style="width:76%"></div></div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Compact variant uses the same JS logic, just add the class
const meter = document.querySelector('.performance-meter');
meter.classList.add('performance-meter-compact');

Glass Variant

Preview

Elena Ruiz

UX Researcher

ERPlora — Design Team

Q4 2025

4.5 /5.0

Overall

Excellent +0.6

Category Breakdown

Research Quality

4.8

User Empathy

4.5

Documentation

4.2

<div class="performance-meter performance-meter-animated glass" style="background-image:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-color:transparent;">
  <div class="performance-meter-header" style="border-bottom-color:rgba(255,255,255,0.15);">
    <div class="performance-meter-avatar">EL</div>
    <div class="performance-meter-employee-info">
      <p class="performance-meter-employee-name" style="color:#fff;">Elena Ruiz</p>
      <p class="performance-meter-employee-role" style="color:rgba(255,255,255,0.7);">UX Researcher</p>
      <p class="performance-meter-employee-department" style="color:rgba(255,255,255,0.5);">ERPlora &mdash; Design Team</p>
    </div>
    <span class="performance-meter-period-badge" style="background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.8);">Q4 2025</span>
  </div>

  <div class="performance-meter-score-section">
    <div class="performance-meter-score-gauge">
      <svg class="performance-meter-score-svg" viewBox="0 0 120 120">
        <circle class="performance-meter-score-track" cx="60" cy="60" r="52" />
        <circle class="performance-meter-score-fill performance-meter-score-fill-excellent"
                cx="60" cy="60" r="52"
                stroke-dasharray="326.73"
                stroke-dashoffset="33"
                style="--perf-circumference: 326.73;" />
      </svg>
      <div class="performance-meter-score-value">
        <span class="performance-meter-score-number" style="color:#fff;">4.5</span>
        <span class="performance-meter-score-max" style="color:rgba(255,255,255,0.5);">/5.0</span>
        <div class="performance-meter-score-label" style="color:rgba(255,255,255,0.6);">Overall</div>
      </div>
    </div>
    <div class="performance-meter-score-summary">
      <span class="performance-meter-score-status performance-meter-score-status-excellent">
        Excellent
      </span>
      <span class="performance-meter-trend performance-meter-trend-up">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 6l-9.5 9.5-5-5L1 18"/><path d="M17 6h6v6"/></svg>
        +0.6
      </span>
    </div>
  </div>

  <div class="performance-meter-categories">
    <h4 class="performance-meter-categories-title" style="color:#fff;border-bottom-color:rgba(255,255,255,0.15);">Category Breakdown</h4>

    <div class="performance-meter-category">
      <div class="performance-meter-category-header">
        <span class="performance-meter-category-name" style="color:rgba(255,255,255,0.9);">Research Quality</span>
        <div class="performance-meter-category-score">
          <span class="performance-meter-category-value" style="color:#fff;">4.8</span>
        </div>
      </div>
      <div class="performance-meter-category-bar">
        <div class="performance-meter-category-fill performance-meter-category-fill-excellent" style="width:96%;"></div>
      </div>
    </div>

    <div class="performance-meter-category">
      <div class="performance-meter-category-header">
        <span class="performance-meter-category-name" style="color:rgba(255,255,255,0.9);">User Empathy</span>
        <div class="performance-meter-category-score">
          <span class="performance-meter-category-value" style="color:#fff;">4.5</span>
        </div>
      </div>
      <div class="performance-meter-category-bar">
        <div class="performance-meter-category-fill performance-meter-category-fill-excellent" style="width:90%;"></div>
      </div>
    </div>

    <div class="performance-meter-category">
      <div class="performance-meter-category-header">
        <span class="performance-meter-category-name" style="color:rgba(255,255,255,0.9);">Documentation</span>
        <div class="performance-meter-category-score">
          <span class="performance-meter-category-value" style="color:#fff;">4.2</span>
        </div>
      </div>
      <div class="performance-meter-category-bar">
        <div class="performance-meter-category-fill performance-meter-category-fill-good" style="width:84%;"></div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Glass variant: use backdrop-blur and translucent backgrounds over a gradient -->
<div class="flex flex-col gap-4 p-6 rounded-box backdrop-blur-xl border border-white/12" style="background:rgba(255,255,255,0.1);background-image:linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
  <div class="flex items-center gap-4 pb-4 border-b border-white/15">
    <div class="w-14 h-14 rounded-full bg-neutral text-neutral-content flex items-center justify-center font-semibold text-xl shrink-0">EL</div>
    <div class="flex-1 min-w-0">
      <p class="font-semibold text-lg m-0 text-white">Elena Ruiz</p>
      <p class="text-sm text-white/70 m-0">UX Researcher</p>
      <p class="text-xs text-white/50 m-0">ERPlora &mdash; Design Team</p>
    </div>
    <span class="px-3 py-1.5 bg-white/15 rounded-full text-xs font-medium text-white/80">Q4 2025</span>
  </div>
  <div class="flex items-center justify-center gap-8 py-4">
    <div class="relative w-30 h-30">
      <svg class="w-full h-full -rotate-90" viewBox="0 0 120 120">
        <circle fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="10" cx="60" cy="60" r="52"/>
        <circle fill="none" stroke="var(--color-success)" stroke-width="10" stroke-linecap="round" cx="60" cy="60" r="52" stroke-dasharray="326.73" stroke-dashoffset="33"/>
      </svg>
      <div class="absolute inset-0 flex flex-col items-center justify-center">
        <span class="text-3xl font-bold tabular-nums text-white">4.5</span>
        <span class="text-sm text-white/50">/5.0</span>
      </div>
    </div>
    <div class="flex flex-col gap-2">
      <span class="inline-flex px-3 py-1.5 rounded-full text-sm font-semibold bg-success/10 text-success">Excellent</span>
      <span class="text-sm font-medium text-success">+0.6</span>
    </div>
  </div>
  <div class="flex flex-col gap-3">
    <h4 class="font-semibold text-sm text-white pb-1 border-b border-white/15 m-0">Category Breakdown</h4>
    <div class="flex flex-col gap-1.5">
      <div class="flex justify-between text-sm"><span class="font-medium text-white/90">Research Quality</span><span class="font-semibold text-white">4.8</span></div>
      <div class="h-2 bg-white/15 rounded-full overflow-hidden"><div class="h-full bg-success rounded-full" style="width:96%"></div></div>
    </div>
    <div class="flex flex-col gap-1.5">
      <div class="flex justify-between text-sm"><span class="font-medium text-white/90">User Empathy</span><span class="font-semibold text-white">4.5</span></div>
      <div class="h-2 bg-white/15 rounded-full overflow-hidden"><div class="h-full bg-success rounded-full" style="width:90%"></div></div>
    </div>
    <div class="flex flex-col gap-1.5">
      <div class="flex justify-between text-sm"><span class="font-medium text-white/90">Documentation</span><span class="font-semibold text-white">4.2</span></div>
      <div class="h-2 bg-white/15 rounded-full overflow-hidden"><div class="h-full bg-primary rounded-full" style="width:84%"></div></div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Glass variant is purely CSS
const meter = document.querySelector('.performance-meter');
meter.classList.add('glass');
// Animated fill works the same way with the .performance-meter-animated class

Classes Reference

Class	Description
`.performance-meter`	Base container with padding, border, and flex column layout
`.performance-meter-compact`	Compact variant (smaller gauge: 80px, less padding)
`.performance-meter-lg`	Large variant (bigger gauge: 160px, more padding)
`.performance-meter-inline`	Horizontal layout with header beside gauge
`.performance-meter-score-only`	Minimal variant showing only the score gauge
`.performance-meter-animated`	Enables fill animations on gauge and bars
`.performance-meter.glass`	Glass morphism variant with translucent backgrounds
`.performance-meter-header`	Employee info row with avatar and period badge
`.performance-meter-avatar`	Circular avatar (3.5rem default)
`.performance-meter-employee-name`	Employee name text
`.performance-meter-employee-role`	Employee role/title
`.performance-meter-employee-department`	Department text
`.performance-meter-period-badge`	Period pill badge (e.g., "Q4 2025")
`.performance-meter-score-section`	Flex row holding gauge and summary
`.performance-meter-score-gauge`	SVG gauge container (120px default)
`.performance-meter-score-svg`	SVG element rotated -90deg for top start
`.performance-meter-score-track`	Background circle (gray track)
`.performance-meter-score-fill`	Foreground circle (colored arc)
`.performance-meter-score-fill-excellent`	Green (success) fill color
`.performance-meter-score-fill-good`	Blue (primary) fill color
`.performance-meter-score-fill-average`	Yellow (warning) fill color
`.performance-meter-score-fill-poor`	Red (error) fill color
`.performance-meter-score-number`	Large score number in center of gauge
`.performance-meter-score-max`	Max score text (e.g., "/5.0")
`.performance-meter-score-status`	Status pill (excellent, good, average, poor)
`.performance-meter-trend`	Trend indicator with arrow icon
`.performance-meter-trend-up`	Green upward trend
`.performance-meter-trend-down`	Red downward trend
`.performance-meter-trend-neutral`	Gray neutral trend
`.performance-meter-goal-section`	Target vs actual comparison row
`.performance-meter-goal-item`	Individual goal metric column
`.performance-meter-goal-diff-positive`	Green positive difference
`.performance-meter-goal-diff-negative`	Red negative difference
`.performance-meter-categories`	Category breakdown container
`.performance-meter-category`	Single category row (header + bar)
`.performance-meter-category-bar`	Bar track background
`.performance-meter-category-fill`	Bar fill (use -excellent, -good, -average, -poor)
`.performance-meter-period-selector`	Period tab selector container
`.performance-meter-period-btn`	Period tab button
`.performance-meter-period-btn-active`	Active period tab with shadow