Capacity Indicator

Shows available workload capacity.

html

<div class="capacity capacity--available" style="--c:#A8E6C1;">
  <div class="capacity__head">
    <span class="capacity__name">Priya Nair</span>
    <span class="capacity__status">
      <svg viewBox="0 0 8 8" width="8" height="8" aria-hidden="true" class="capacity__glyph"><circle cx="4" cy="4" r="4"/></svg>
      <span class="capacity__status-text">status</span>
    </span>
  </div>
  <div class="capacity__track" role="img" aria-label="62 percent of capacity used, threshold at 80 percent">
    <div class="capacity__fill" style="width:62%;"></div>
    <div class="capacity__threshold" style="left:80%;"></div>
  </div>
  <div class="capacity__figures">62% used · limit 80%</div>
</div>
<style>
.capacity { font: 14px/1.4 system-ui, sans-serif; color: #241430; max-width: 280px; }
.capacity__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.capacity__name { font-weight: 600; }
.capacity__status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.capacity__glyph { fill: var(--c); }
.capacity--available .capacity__status-text::before { content: "Available"; }
.capacity--busy .capacity__status-text::before { content: "Busy"; }
.capacity--over .capacity__status-text::before { content: "Over capacity"; }
.capacity--over .capacity__glyph { fill: #b3261e; }
.capacity__track { position: relative; height: 10px; border-radius: 999px; background: #24143014; overflow: visible; }
.capacity__fill { height: 100%; border-radius: 999px; background: var(--c); }
.capacity--over .capacity__fill { background: #b3261e; }
.capacity__threshold { position: absolute; top: -3px; width: 2px; height: 16px; background: #241430; }
.capacity__figures { margin-top: 6px; font-size: 12px; opacity: .75; }
</style>

tailwind

<div class="capacity-tw capacity-tw--available max-w-xs font-sans text-[#241430]" style="--c:#A8E6C1;">
  <div class="flex justify-between items-center mb-1.5">
    <span class="font-semibold">Priya Nair</span>
    <span class="capacity-tw__status inline-flex items-center gap-1 text-xs">
      <svg viewBox="0 0 8 8" width="8" height="8" aria-hidden="true"><circle cx="4" cy="4" r="4" fill="var(--c)"/></svg>
      <span class="capacity-tw__status-text"></span>
    </span>
  </div>
  <div class="relative h-2.5 rounded-full bg-[#24143014]" role="img" aria-label="62 percent of capacity used, threshold at 80 percent">
    <div class="capacity-tw__fill h-full rounded-full" style="width:62%;background:var(--c);"></div>
    <div class="absolute -top-[3px] w-0.5 h-4 bg-[#241430]" style="left:80%;"></div>
  </div>
  <div class="mt-1.5 text-xs opacity-75">62% used · limit 80%</div>
</div>
<style>
.capacity-tw--available .capacity-tw__status-text::before { content: "Available"; }
.capacity-tw--busy .capacity-tw__status-text::before { content: "Busy"; }
.capacity-tw--over .capacity-tw__status-text::before { content: "Over capacity"; }
.capacity-tw--over .capacity-tw__fill { background: #b3261e !important; }
</style>

react

export function CapacityIndicator({
  name = "Priya Nair",
  load = 62,
  threshold = 80,
  status = "available",
  color = "#A8E6C1",
}) {
  const statusText = { available: "Available", busy: "Busy", over: "Over capacity" }[status] ?? "Available";
  const fillColor = status === "over" ? "#b3261e" : color;
  return (
    <div style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", maxWidth: 280 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
        <span style={{ fontWeight: 600 }}>{name}</span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 12 }}>
          <svg viewBox="0 0 8 8" width="8" height="8" aria-hidden="true"><circle cx="4" cy="4" r="4" fill={fillColor} /></svg>
          {statusText}
        </span>
      </div>
      <div role="img" aria-label={`${load} percent of capacity used, threshold at ${threshold} percent`}
        style={{ position: "relative", height: 10, borderRadius: 999, background: "#24143014" }}>
        <div style={{ height: "100%", width: `${load}%`, borderRadius: 999, background: fillColor }} />
        <div style={{ position: "absolute", top: -3, left: `${threshold}%`, width: 2, height: 16, background: "#241430" }} />
      </div>
      <div style={{ marginTop: 6, fontSize: 12, opacity: 0.75 }}>{load}% used · limit {threshold}%</div>
    </div>
  );
}