Progress Checklist

Checklist showing completion of setup steps.

html

<div class="pc pc--bar" style="--accent:#D9C8F0;">
  <h3 class="pc__title">Setup progress</h3>
  <div class="pc__bar"><span class="pc__bar-fill" style="width:calc(3 / 5 * 100%);"></span></div>
  <div class="pc__ring" style="background:conic-gradient(var(--accent) calc(3 / 5 * 100%), #24143018 0);"><span class="pc__ring-hole"></span></div>
  <p class="pc__fraction">3 <span class="pc__fraction-of">of 5</span></p>
  <p class="pc__caption">3 of 5 steps complete</p>
</div>
<style>
.pc { font: 16px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; max-width: 300px; border-radius: 14px; border: 1px solid #24143018; text-align: center; }
.pc__title { margin: 0 0 14px; font-size: 15px; font-weight: 700; text-align: left; }
.pc__bar, .pc__ring, .pc__fraction { display: none; }
.pc--bar .pc__bar { display: block; height: 8px; border-radius: 4px; background: #24143018; overflow: hidden; margin-bottom: 10px; }
.pc--ring .pc__ring { display: inline-flex; width: 88px; height: 88px; border-radius: 999px; align-items: center; justify-content: center; margin-bottom: 10px; }
.pc--fraction .pc__fraction { display: block; font-size: 34px; font-weight: 800; color: var(--accent); margin: 6px 0; }
.pc__bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.pc__ring-hole { width: 64px; height: 64px; border-radius: 999px; background: #FAF7F2; }
.pc__fraction-of { font-size: 14px; font-weight: 500; color: #24143090; }
.pc__caption { margin: 0; font-size: 12px; color: #24143090; text-align: left; }
</style>

tailwind

<div class="pc-tw pc-tw--bar max-w-[300px] p-5 rounded-2xl border border-[#24143018] bg-[#FAF7F2] text-[#241430] font-sans text-center" style="--accent:#D9C8F0">
  <h3 class="m-0 mb-3.5 text-[15px] font-bold text-left">Setup progress</h3>
  <div class="pc-tw__bar hidden h-2 rounded-full bg-[#24143018] overflow-hidden mb-2.5"><span class="block h-full rounded-full" style="background:#D9C8F0;width:calc(3 / 5 * 100%)"></span></div>
  <div class="pc-tw__ring hidden w-[88px] h-[88px] rounded-full items-center justify-center mb-2.5 mx-auto" style="background:conic-gradient(#D9C8F0 calc(3 / 5 * 100%), #24143018 0)"><span class="w-16 h-16 rounded-full bg-[#FAF7F2] block"></span></div>
  <p class="pc-tw__fraction hidden text-[34px] font-extrabold my-1.5" style="color:#D9C8F0">3 <span class="text-sm font-medium text-[#24143090]">of 5</span></p>
  <p class="m-0 text-xs text-[#24143090] text-left">3 of 5 steps complete</p>
</div>
<style>
.pc-tw--bar .pc-tw__bar { display: block; }
.pc-tw--ring .pc-tw__ring { display: inline-flex; }
.pc-tw--fraction .pc-tw__fraction { display: block; }
</style>

react

export function ProgressChecklist({
  title = "Setup progress",
  completed = 3,
  total = 5,
  accent = "#D9C8F0",
  style = "bar",
}) {
  const pct = Math.min(100, (completed / total) * 100);
  return (
    <div style={{ font: "16px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, maxWidth: 300, borderRadius: 14, border: "1px solid #24143018", textAlign: "center" }}>
      <h3 style={{ margin: "0 0 14px", fontSize: 15, fontWeight: 700, textAlign: "left" }}>{title}</h3>
      {style === "bar" && (
        <div style={{ height: 8, borderRadius: 4, background: "#24143018", overflow: "hidden", marginBottom: 10 }}>
          <span style={{ display: "block", height: "100%", width: pct + "%", background: accent, borderRadius: 4 }} />
        </div>
      )}
      {style === "ring" && (
        <div style={{ width: 88, height: 88, borderRadius: 999, display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 10, background: "conic-gradient(" + accent + " " + pct + "%, #24143018 0)" }}>
          <span style={{ width: 64, height: 64, borderRadius: 999, background: "#FAF7F2" }} />
        </div>
      )}
      {style === "fraction" && (
        <p style={{ fontSize: 34, fontWeight: 800, color: accent, margin: "6px 0" }}>{completed} <span style={{ fontSize: 14, fontWeight: 500, color: "#24143090" }}>of {total}</span></p>
      )}
      <p style={{ margin: 0, fontSize: 12, color: "#24143090", textAlign: "left" }}>{completed} of {total} steps complete</p>
    </div>
  );
}