Workload Indicator

Shows current workload.

html

<div class="workload workload--heavy" style="--c:#E8A020;">
  <div class="workload__head">
    <span class="workload__person">Jordan Lee</span>
    <span class="workload__status"></span>
  </div>
  <div class="workload__bar" role="img" aria-label="Jordan Lee is at 88 percent of capacity">
    <div class="workload__fill" style="width:88%;"></div>
  </div>
</div>
<style>
.workload { font: 14px/1.4 system-ui, sans-serif; color: #241430; max-width: 260px; }
.workload__head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.workload__status { font-size: 12px; font-weight: 600; }
.workload--light .workload__status::before { content: "Light"; color: #2f8f4e; }
.workload--balanced .workload__status::before { content: "Balanced"; color: #241430; }
.workload--heavy .workload__status::before { content: "Heavy"; color: var(--c); }
.workload--overloaded .workload__status::before { content: "⚠ Overloaded"; color: #b3261e; }
.workload__bar { height: 8px; border-radius: 999px; background: #24143014; overflow: hidden; }
.workload__fill { height: 100%; background: var(--c); border-radius: 999px; }
.workload--overloaded .workload__fill { background: #b3261e; }
</style>

tailwind

<div class="workload-tw workload-tw--heavy max-w-xs font-sans text-[#241430]" style="--c:#E8A020;">
  <div class="flex justify-between mb-1.5">
    <span>Jordan Lee</span>
    <span class="workload-tw__status text-xs font-semibold"></span>
  </div>
  <div class="h-2 rounded-full bg-[#24143014] overflow-hidden" role="img" aria-label="Jordan Lee is at 88 percent of capacity">
    <div class="workload-tw__fill h-full rounded-full" style="width:88%;background:var(--c);"></div>
  </div>
</div>
<style>
.workload-tw--light .workload-tw__status::before { content: "Light"; color: #2f8f4e; }
.workload-tw--balanced .workload-tw__status::before { content: "Balanced"; color: #241430; }
.workload-tw--heavy .workload-tw__status::before { content: "Heavy"; color: var(--c); }
.workload-tw--overloaded .workload-tw__status::before { content: "⚠ Overloaded"; color: #b3261e; }
.workload-tw--overloaded .workload-tw__fill { background: #b3261e !important; }
</style>

react

export function WorkloadIndicator({
  person = "Jordan Lee",
  load = 88,
  status = "heavy",
  color = "#E8A020",
}) {
  const statusText = { light: "Light", balanced: "Balanced", heavy: "Heavy", overloaded: "⚠ Overloaded" }[status] ?? "Balanced";
  const statusColor = { light: "#2f8f4e", balanced: "#241430", heavy: color, overloaded: "#b3261e" }[status] ?? "#241430";
  const fillColor = status === "overloaded" ? "#b3261e" : color;
  return (
    <div style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", maxWidth: 260 }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
        <span>{person}</span>
        <span style={{ fontSize: 12, fontWeight: 600, color: statusColor }}>{statusText}</span>
      </div>
      <div role="img" aria-label={`${person} is at ${load} percent of capacity`} style={{ height: 8, borderRadius: 999, background: "#24143014", overflow: "hidden" }}>
        <div style={{ height: "100%", width: `${load}%`, background: fillColor, borderRadius: 999 }} />
      </div>
    </div>
  );
}