Open demo

CSS code

HTML 
<div><span class="lbl">Skill bars on a profile</span><div class="card">
<div class="sk">
  <div class="sk-who"><span class="sk-avatar" aria-hidden="true">MO</span><div><b>Maya Okafor</b><span>Product designer · Lisbon</span></div></div>
  <ul class="sk-list">
    <li class="sk-row"><div><b id="sk-figma">Figma</b><span aria-hidden="true">95%</span></div>
      <div class="sk-bar" role="progressbar" aria-labelledby="sk-figma" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="--v:95"><i></i></div></li>
    <li class="sk-row"><div><b id="sk-proto">Prototyping</b><span aria-hidden="true">88%</span></div>
      <div class="sk-bar" role="progressbar" aria-labelledby="sk-proto" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100" style="--v:88"><i></i></div></li>
    <li class="sk-row"><div><b id="sk-research">User research</b><span aria-hidden="true">76%</span></div>
      <div class="sk-bar" role="progressbar" aria-labelledby="sk-research" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100" style="--v:76"><i></i></div></li>
    <li class="sk-row"><div><b id="sk-code">HTML & CSS</b><span aria-hidden="true">62%</span></div>
      <div class="sk-bar" role="progressbar" aria-labelledby="sk-code" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100" style="--v:62"><i></i></div></li>
  </ul>
</div></div></div>

<div><span class="lbl">Goals with a pace marker</span><div class="card">
<div class="sk goals" style="--pace:70">
  <div class="sk-top"><b>Q3 goals</b><span>Day 64 of 92</span></div>
  <ul class="sk-list">
    <li class="sk-row"><div><b id="sk-rev">Revenue</b><span aria-hidden="true">73%</span></div>
      <div class="sk-goal"><div class="sk-bar" role="progressbar" aria-labelledby="sk-rev" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" aria-valuetext="$182,400 of $250,000, 73%, ahead of pace" style="--v:73"><i></i></div></div>
      <div class="sk-meta"><span><strong>$182,400</strong> of $250,000</span><em class="sk-tag up">Ahead</em></div></li>
    <li class="sk-row"><div><b id="sk-cust">New customers</b><span aria-hidden="true">53%</span></div>
      <div class="sk-goal"><div class="sk-bar" role="progressbar" aria-labelledby="sk-cust" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100" aria-valuetext="212 of 400, 53%, behind pace" style="--v:53"><i></i></div></div>
      <div class="sk-meta"><span><strong>212</strong> of 400</span><em class="sk-tag down">Behind</em></div></li>
    <li class="sk-row"><div><b id="sk-web">Webinar sign-ups</b><span aria-hidden="true">74%</span></div>
      <div class="sk-goal"><div class="sk-bar" role="progressbar" aria-labelledby="sk-web" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" aria-valuetext="1,480 of 2,000, 74%, ahead of pace" style="--v:74"><i></i></div></div>
      <div class="sk-meta"><span><strong>1,480</strong> of 2,000</span><em class="sk-tag up">Ahead</em></div></li>
  </ul>
  <p class="sk-key">Where we should be today (70%)</p>
</div></div></div>

<div><span class="lbl">Rating breakdown</span><div class="card">
<div class="sk rating">
  <div class="sk-score"><b aria-hidden="true">4.6</b><div class="sk-stars" aria-hidden="true">★★★★★</div><span class="sk-sr">Rated 4.6 out of 5 from </span><span>2,318 reviews</span></div>
  <ul class="sk-rows" aria-label="Share of reviews by star rating">
    <li><span>5 stars</span><span class="sk-bar" aria-hidden="true" style="--v:71"><i></i></span><span>71%</span></li>
    <li><span>4 stars</span><span class="sk-bar" aria-hidden="true" style="--v:18"><i></i></span><span>18%</span></li>
    <li><span>3 stars</span><span class="sk-bar" aria-hidden="true" style="--v:6"><i></i></span><span>6%</span></li>
    <li><span>2 stars</span><span class="sk-bar" aria-hidden="true" style="--v:2"><i></i></span><span>2%</span></li>
    <li><span>1 star</span><span class="sk-bar" aria-hidden="true" style="--v:3"><i></i></span><span>3%</span></li>
  </ul>
</div></div></div>
CSS 
/* Skill and stat bars for profiles and dashboards. Skill and goal bars are role="progressbar" with --v (0 to 100)
   setting the fill; the goal bars add a pace marker at --pace. The rating rows are a list whose text carries the
   numbers, so their bars are decorative (aria-hidden). */
.sk{--sk-accent:#c2410c;--sk-track:#efe7de;--sk-ink:#2a211b;--sk-muted:#65574c;color:var(--sk-ink)}
.sk-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* profile header */
.sk-who{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid #efe7de}
.sk-avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fde6d8;color:#9a3412;font-weight:700}
.sk-who b{display:block;font-size:1rem}
.sk-who div span{font-size:.85rem;color:var(--sk-muted)}
/* skill rows */
.sk-list{display:grid;gap:16px;list-style:none}
.sk-row{display:grid;gap:8px}
.sk-row>div:first-child{display:flex;justify-content:space-between;gap:12px;font-size:.9rem}
.sk-row>div:first-child span{font-weight:700;color:var(--sk-accent);font-variant-numeric:tabular-nums}
.sk-bar{--v:0;display:block;height:6px;border-radius:999px;background:var(--sk-track);overflow:hidden}
.sk-bar>i{display:block;height:100%;width:calc(var(--v) * 1%);border-radius:inherit;background:linear-gradient(90deg,#ea580c,var(--sk-accent))}
/* goals with a pace marker: the marker sits outside the clipped bar so it can overhang it */
.sk.goals{--sk-accent:#047857;--sk-track:#e3ece8}
.sk-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-bottom:18px}
.sk-top b{font-size:1rem}
.sk-top span{font-size:.84rem;color:var(--sk-muted)}
.sk-goal{position:relative;padding:4px 0}
.sk-goal .sk-bar{height:10px}
.sk-goal .sk-bar>i{background:var(--sk-accent)}
.sk-goal::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--pace) * 1%);width:2px;margin-left:-1px;border-radius:1px;background:var(--sk-ink)}
.sk-meta{display:flex;justify-content:space-between;gap:12px;font-size:.84rem;color:var(--sk-muted);font-variant-numeric:tabular-nums}
.sk-meta strong{color:var(--sk-ink)}
.sk-tag{font-weight:700;font-style:normal}
.sk-tag.up{color:#047857}.sk-tag.down{color:#b91c1c}
.sk-key{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:.8rem;color:var(--sk-muted)}
.sk-key::before{content:"";width:2px;height:14px;border-radius:1px;background:var(--sk-ink)}
/* rating breakdown */
.sk.rating{--sk-accent:#b45309;--sk-track:#f1e9df;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.sk-score{text-align:center;min-width:112px}
.sk-score b{display:block;font-size:2.6rem;line-height:1;letter-spacing:-.02em}
.sk-stars{display:inline-block;margin:6px 0 4px;font-size:1rem;letter-spacing:2px;color:transparent;
  background:linear-gradient(90deg,var(--sk-accent) 92%,#d9cbbd 92%);-webkit-background-clip:text;background-clip:text}
.sk-score>span:last-child{display:block;font-size:.8rem;color:var(--sk-muted)}
.sk-rows{flex:1 1 240px;display:grid;gap:8px;list-style:none}
.sk-rows li{display:grid;grid-template-columns:3.6em 1fr 2.8em;align-items:center;gap:10px;font-size:.84rem;color:var(--sk-muted);font-variant-numeric:tabular-nums}
.sk-rows li span:last-child{text-align:right;color:var(--sk-ink);font-weight:600}
.sk-rows .sk-bar{height:8px}
.sk-rows .sk-bar>i{background:var(--sk-accent)}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Skill bars on a profile</span><div class="card demo-card"><div class="card-body p-4">
<div class="sk">
  <div class="d-flex align-items-center gap-3 pb-3 mb-3 border-bottom"><span class="sk-avatar rounded-circle d-grid fw-bold" style="place-items:center" aria-hidden="true">MO</span><div><b class="d-block">Maya Okafor</b><span class="small sk-muted">Product designer · Lisbon</span></div></div>
  <ul class="sk-list list-unstyled mb-0">
    <li class="sk-row sk-skill"><div class="d-flex justify-content-between gap-3"><b id="sk-figma">Figma</b><span class="fw-bold sk-val" aria-hidden="true">95%</span></div>
      <div class="progress" role="progressbar" aria-labelledby="sk-figma" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width:95%"></div></div></li>
    <li class="sk-row sk-skill"><div class="d-flex justify-content-between gap-3"><b id="sk-proto">Prototyping</b><span class="fw-bold sk-val" aria-hidden="true">88%</span></div>
      <div class="progress" role="progressbar" aria-labelledby="sk-proto" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width:88%"></div></div></li>
    <li class="sk-row sk-skill"><div class="d-flex justify-content-between gap-3"><b id="sk-research">User research</b><span class="fw-bold sk-val" aria-hidden="true">76%</span></div>
      <div class="progress" role="progressbar" aria-labelledby="sk-research" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width:76%"></div></div></li>
    <li class="sk-row sk-skill"><div class="d-flex justify-content-between gap-3"><b id="sk-code">HTML & CSS</b><span class="fw-bold sk-val" aria-hidden="true">62%</span></div>
      <div class="progress" role="progressbar" aria-labelledby="sk-code" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width:62%"></div></div></li>
  </ul>
</div></div></div></div>

<div><span class="lbl">Goals with a pace marker</span><div class="card demo-card"><div class="card-body p-4">
<div class="sk goals" style="--pace:70">
  <div class="d-flex flex-wrap justify-content-between align-items-baseline column-gap-3 row-gap-1 mb-3"><b>Q3 goals</b><span class="sk-meta">Day 64 of 92</span></div>
  <ul class="sk-list list-unstyled mb-0">
    <li class="sk-row"><div class="d-flex justify-content-between gap-3"><b id="sk-rev">Revenue</b><span class="fw-bold sk-val" aria-hidden="true">73%</span></div>
      <div class="sk-goal"><div class="progress" role="progressbar" aria-labelledby="sk-rev" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" aria-valuetext="$182,400 of $250,000, 73%, ahead of pace"><div class="progress-bar" style="width:73%"></div></div></div>
      <div class="sk-meta d-flex justify-content-between gap-3"><span><strong>$182,400</strong> of $250,000</span><em class="sk-tag fw-bold text-success">Ahead</em></div></li>
    <li class="sk-row"><div class="d-flex justify-content-between gap-3"><b id="sk-cust">New customers</b><span class="fw-bold sk-val" aria-hidden="true">53%</span></div>
      <div class="sk-goal"><div class="progress" role="progressbar" aria-labelledby="sk-cust" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100" aria-valuetext="212 of 400, 53%, behind pace"><div class="progress-bar" style="width:53%"></div></div></div>
      <div class="sk-meta d-flex justify-content-between gap-3"><span><strong>212</strong> of 400</span><em class="sk-tag fw-bold text-danger">Behind</em></div></li>
    <li class="sk-row"><div class="d-flex justify-content-between gap-3"><b id="sk-web">Webinar sign-ups</b><span class="fw-bold sk-val" aria-hidden="true">74%</span></div>
      <div class="sk-goal"><div class="progress" role="progressbar" aria-labelledby="sk-web" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" aria-valuetext="1,480 of 2,000, 74%, ahead of pace"><div class="progress-bar" style="width:74%"></div></div></div>
      <div class="sk-meta d-flex justify-content-between gap-3"><span><strong>1,480</strong> of 2,000</span><em class="sk-tag fw-bold text-success">Ahead</em></div></li>
  </ul>
  <p class="sk-key d-flex align-items-center gap-2 mt-3 mb-0">Where we should be today (70%)</p>
</div></div></div></div>

<div><span class="lbl">Rating breakdown</span><div class="card demo-card"><div class="card-body p-4">
<div class="sk rating d-flex flex-wrap align-items-center row-gap-3 column-gap-4">
  <div class="sk-score text-center"><b class="d-block" aria-hidden="true">4.6</b><div class="sk-stars d-inline-block" aria-hidden="true">★★★★★</div><span class="visually-hidden">Rated 4.6 out of 5 from </span><span class="d-block small sk-muted">2,318 reviews</span></div>
  <ul class="sk-rows list-unstyled mb-0" aria-label="Share of reviews by star rating">
    <li><span>5 stars</span><span class="progress" aria-hidden="true"><span class="progress-bar" style="width:71%"></span></span><span class="text-end fw-semibold">71%</span></li>
    <li><span>4 stars</span><span class="progress" aria-hidden="true"><span class="progress-bar" style="width:18%"></span></span><span class="text-end fw-semibold">18%</span></li>
    <li><span>3 stars</span><span class="progress" aria-hidden="true"><span class="progress-bar" style="width:6%"></span></span><span class="text-end fw-semibold">6%</span></li>
    <li><span>2 stars</span><span class="progress" aria-hidden="true"><span class="progress-bar" style="width:2%"></span></span><span class="text-end fw-semibold">2%</span></li>
    <li><span>1 star</span><span class="progress" aria-hidden="true"><span class="progress-bar" style="width:3%"></span></span><span class="text-end fw-semibold">3%</span></li>
  </ul>
</div></div></div></div>
CSS 
/* Skill and stat bars on Bootstrap .progress. Skill and goal bars carry role="progressbar"; the goal bars add a pace
   marker at --pace. The rating rows are a list whose text carries the numbers, so their bars are aria-hidden. */
.sk{--sk-accent:#c2410c;--sk-track:#efe7de;--sk-ink:#2a211b;--sk-muted:#65574c;--bs-border-color:#efe7de;color:var(--sk-ink)}
.sk .progress{--bs-progress-height:6px;--bs-progress-bg:var(--sk-track);--bs-progress-bar-bg:var(--sk-accent);--bs-progress-border-radius:999px}
.sk .progress-bar{border-radius:inherit}
.sk .sk-avatar{width:48px;height:48px;background:#fde6d8;color:#9a3412}
.sk .sk-muted{color:var(--sk-muted)}
.sk .sk-list{display:grid;gap:16px}
.sk .sk-row{display:grid;gap:8px;font-size:.9rem}
.sk .sk-val{color:var(--sk-accent);font-variant-numeric:tabular-nums}
.sk .sk-skill .progress-bar{background:linear-gradient(90deg,#ea580c,var(--sk-accent))}
/* goals: the pace marker sits outside the clipped .progress so it can overhang it */
.sk.goals{--sk-accent:#047857;--sk-track:#e3ece8}
.sk .sk-goal{position:relative;padding:4px 0}
.sk .sk-goal .progress{--bs-progress-height:10px}
.sk .sk-goal::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--pace) * 1%);width:2px;margin-left:-1px;border-radius:1px;background:var(--sk-ink)}
.sk .sk-meta{font-size:.84rem;color:var(--sk-muted);font-variant-numeric:tabular-nums}
.sk .sk-meta strong{color:var(--sk-ink)}
.sk .sk-tag{font-style:normal}
.sk{--bs-success-rgb:4,120,87;--bs-danger-rgb:185,28,28}
.sk .sk-key{font-size:.8rem;color:var(--sk-muted)}
.sk .sk-key::before{content:"";width:2px;height:14px;border-radius:1px;background:var(--sk-ink)}
/* rating breakdown */
.sk.rating{--sk-accent:#b45309;--sk-track:#f1e9df}
.sk .sk-score{min-width:112px}
.sk .sk-score b{font-size:2.6rem;line-height:1;letter-spacing:-.02em}
.sk .sk-stars{margin:6px 0 4px;font-size:1rem;letter-spacing:2px;color:transparent;
  background:linear-gradient(90deg,var(--sk-accent) 92%,#d9cbbd 92%);-webkit-background-clip:text;background-clip:text}
.sk .sk-rows{flex:1 1 240px;display:grid;gap:8px}
.sk .sk-rows li{display:grid;grid-template-columns:3.6em 1fr 2.8em;align-items:center;gap:10px;font-size:.84rem;color:var(--sk-muted);font-variant-numeric:tabular-nums}
.sk .sk-rows li span:last-child{color:var(--sk-ink)}
.sk .sk-rows .progress{--bs-progress-height:8px}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#6b5d52] uppercase">Skill bars on a profile</span><div class="rounded-2xl border border-[#ebe3d9] bg-white px-6 pt-[22px] pb-6 shadow-[0_1px_2px_rgba(42,33,27,.04)]">
<div>
  <div class="mb-[18px] flex items-center gap-3.5 border-b border-sk-track pb-[18px]"><span class="grid size-12 place-items-center rounded-full bg-[#fde6d8] font-bold text-[#9a3412]" aria-hidden="true">MO</span><div><b class="block">Maya Okafor</b><span class="text-[.85rem] text-sk-muted">Product designer · Lisbon</span></div></div>
  <ul class="grid gap-4">
    <li class="grid gap-2 text-[.9rem]"><div class="flex justify-between gap-3"><b id="sk-figma">Figma</b><span class="font-bold text-sk-rust tabular-nums" aria-hidden="true">95%</span></div>
      <div class="h-1.5 overflow-hidden rounded-full bg-sk-track" role="progressbar" aria-labelledby="sk-figma" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"><div class="h-full w-[95%] rounded-full bg-linear-to-r from-sk-rust-2 to-sk-rust"></div></div></li>
    <li class="grid gap-2 text-[.9rem]"><div class="flex justify-between gap-3"><b id="sk-proto">Prototyping</b><span class="font-bold text-sk-rust tabular-nums" aria-hidden="true">88%</span></div>
      <div class="h-1.5 overflow-hidden rounded-full bg-sk-track" role="progressbar" aria-labelledby="sk-proto" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"><div class="h-full w-[88%] rounded-full bg-linear-to-r from-sk-rust-2 to-sk-rust"></div></div></li>
    <li class="grid gap-2 text-[.9rem]"><div class="flex justify-between gap-3"><b id="sk-research">User research</b><span class="font-bold text-sk-rust tabular-nums" aria-hidden="true">76%</span></div>
      <div class="h-1.5 overflow-hidden rounded-full bg-sk-track" role="progressbar" aria-labelledby="sk-research" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100"><div class="h-full w-[76%] rounded-full bg-linear-to-r from-sk-rust-2 to-sk-rust"></div></div></li>
    <li class="grid gap-2 text-[.9rem]"><div class="flex justify-between gap-3"><b id="sk-code">HTML & CSS</b><span class="font-bold text-sk-rust tabular-nums" aria-hidden="true">62%</span></div>
      <div class="h-1.5 overflow-hidden rounded-full bg-sk-track" role="progressbar" aria-labelledby="sk-code" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"><div class="h-full w-[62%] rounded-full bg-linear-to-r from-sk-rust-2 to-sk-rust"></div></div></li>
  </ul>
</div></div></div>

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#6b5d52] uppercase">Goals with a pace marker</span><div class="rounded-2xl border border-[#ebe3d9] bg-white px-6 pt-[22px] pb-6 shadow-[0_1px_2px_rgba(42,33,27,.04)]">
<div>
  <div class="mb-[18px] flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1"><b>Q3 goals</b><span class="text-[.84rem] text-sk-muted">Day 64 of 92</span></div>
  <ul class="grid gap-4">
    <li class="grid gap-2 text-[.9rem]"><div class="flex justify-between gap-3"><b id="sk-rev">Revenue</b><span class="font-bold text-sk-green tabular-nums" aria-hidden="true">73%</span></div>
      <div class="relative py-1 after:absolute after:inset-y-0 after:left-[70%] after:-ml-px after:w-0.5 after:rounded-[1px] after:bg-sk-ink after:content-['']"><div class="h-2.5 overflow-hidden rounded-full bg-sk-track-green" role="progressbar" aria-labelledby="sk-rev" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" aria-valuetext="$182,400 of $250,000, 73%, ahead of pace"><div class="h-full w-[73%] rounded-full bg-sk-green"></div></div></div>
      <div class="flex justify-between gap-3 text-[.84rem] text-sk-muted tabular-nums"><span><strong class="text-sk-ink">$182,400</strong> of $250,000</span><em class="font-bold text-sk-green not-italic">Ahead</em></div></li>
    <li class="grid gap-2 text-[.9rem]"><div class="flex justify-between gap-3"><b id="sk-cust">New customers</b><span class="font-bold text-sk-green tabular-nums" aria-hidden="true">53%</span></div>
      <div class="relative py-1 after:absolute after:inset-y-0 after:left-[70%] after:-ml-px after:w-0.5 after:rounded-[1px] after:bg-sk-ink after:content-['']"><div class="h-2.5 overflow-hidden rounded-full bg-sk-track-green" role="progressbar" aria-labelledby="sk-cust" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100" aria-valuetext="212 of 400, 53%, behind pace"><div class="h-full w-[53%] rounded-full bg-sk-green"></div></div></div>
      <div class="flex justify-between gap-3 text-[.84rem] text-sk-muted tabular-nums"><span><strong class="text-sk-ink">212</strong> of 400</span><em class="font-bold text-[#b91c1c] not-italic">Behind</em></div></li>
    <li class="grid gap-2 text-[.9rem]"><div class="flex justify-between gap-3"><b id="sk-web">Webinar sign-ups</b><span class="font-bold text-sk-green tabular-nums" aria-hidden="true">74%</span></div>
      <div class="relative py-1 after:absolute after:inset-y-0 after:left-[70%] after:-ml-px after:w-0.5 after:rounded-[1px] after:bg-sk-ink after:content-['']"><div class="h-2.5 overflow-hidden rounded-full bg-sk-track-green" role="progressbar" aria-labelledby="sk-web" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" aria-valuetext="1,480 of 2,000, 74%, ahead of pace"><div class="h-full w-[74%] rounded-full bg-sk-green"></div></div></div>
      <div class="flex justify-between gap-3 text-[.84rem] text-sk-muted tabular-nums"><span><strong class="text-sk-ink">1,480</strong> of 2,000</span><em class="font-bold text-sk-green not-italic">Ahead</em></div></li>
  </ul>
  <p class="mt-[18px] flex items-center gap-2 text-[.8rem] text-sk-muted before:h-3.5 before:w-0.5 before:rounded-[1px] before:bg-sk-ink before:content-['']">Where we should be today (70%)</p>
</div></div></div>

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#6b5d52] uppercase">Rating breakdown</span><div class="rounded-2xl border border-[#ebe3d9] bg-white px-6 pt-[22px] pb-6 shadow-[0_1px_2px_rgba(42,33,27,.04)]">
<div class="flex flex-wrap items-center gap-x-7 gap-y-[18px]">
  <div class="min-w-28 text-center"><b class="block text-[2.6rem] leading-none tracking-[-.02em]" aria-hidden="true">4.6</b><div class="mt-1.5 mb-1 inline-block bg-[linear-gradient(90deg,#b45309_92%,#d9cbbd_92%)] bg-clip-text text-base tracking-[2px] text-transparent" aria-hidden="true">★★★★★</div><span class="sr-only">Rated 4.6 out of 5 from </span><span class="block text-[.8rem] text-sk-muted">2,318 reviews</span></div>
  <ul class="grid flex-[1_1_240px] gap-2" aria-label="Share of reviews by star rating">
    <li class="grid grid-cols-[3.6em_1fr_2.8em] items-center gap-2.5 text-[.84rem] text-sk-muted tabular-nums"><span>5 stars</span><span class="block h-2 overflow-hidden rounded-full bg-[#f1e9df]" aria-hidden="true"><i class="block h-full w-[71%] rounded-full bg-sk-amber"></i></span><span class="text-right font-semibold text-sk-ink">71%</span></li>
    <li class="grid grid-cols-[3.6em_1fr_2.8em] items-center gap-2.5 text-[.84rem] text-sk-muted tabular-nums"><span>4 stars</span><span class="block h-2 overflow-hidden rounded-full bg-[#f1e9df]" aria-hidden="true"><i class="block h-full w-[18%] rounded-full bg-sk-amber"></i></span><span class="text-right font-semibold text-sk-ink">18%</span></li>
    <li class="grid grid-cols-[3.6em_1fr_2.8em] items-center gap-2.5 text-[.84rem] text-sk-muted tabular-nums"><span>3 stars</span><span class="block h-2 overflow-hidden rounded-full bg-[#f1e9df]" aria-hidden="true"><i class="block h-full w-[6%] rounded-full bg-sk-amber"></i></span><span class="text-right font-semibold text-sk-ink">6%</span></li>
    <li class="grid grid-cols-[3.6em_1fr_2.8em] items-center gap-2.5 text-[.84rem] text-sk-muted tabular-nums"><span>2 stars</span><span class="block h-2 overflow-hidden rounded-full bg-[#f1e9df]" aria-hidden="true"><i class="block h-full w-[2%] rounded-full bg-sk-amber"></i></span><span class="text-right font-semibold text-sk-ink">2%</span></li>
    <li class="grid grid-cols-[3.6em_1fr_2.8em] items-center gap-2.5 text-[.84rem] text-sk-muted tabular-nums"><span>1 star</span><span class="block h-2 overflow-hidden rounded-full bg-[#f1e9df]" aria-hidden="true"><i class="block h-full w-[3%] rounded-full bg-sk-amber"></i></span><span class="text-right font-semibold text-sk-ink">3%</span></li>
  </ul>
</div></div></div>
CSS 
@theme {
  --color-sk-ink: #2a211b;
  --color-sk-muted: #65574c;
  --color-sk-rust: #c2410c;
  --color-sk-rust-2: #ea580c;
  --color-sk-green: #047857;
  --color-sk-amber: #b45309;
  --color-sk-track: #efe7de;
  --color-sk-track-green: #e3ece8;
}

About this set

Progress bars for profile pages, portfolios and dashboards. Skill bars on a profile puts a designer’s name and role above four thin gradient bars for Figma, prototyping, user research and HTML and CSS, the layout most resume and portfolio templates need. Goals with a pace marker is a dashboard card for quarterly targets: revenue, new customers and webinar sign-ups each get a bar, the amount against the target, and an ahead or behind tag, while a thin dark line across every bar marks where the team should be today. The marker sits on a wrapper outside the clipped bar, so it can overhang the track and line up at the same percentage on every row. Rating breakdown is the review summary found on product pages: a 4.6 score with partially filled stars and five rows for the share of each star rating. Here the bars only illustrate numbers that are already in the text, so they are hidden from screen readers and the list reads as plain rows. Skill and goal bars are role=”progressbar” elements with –v setting the fill, and the goal bars carry the full amount in aria-valuetext.

What’s included

  • Skill bars under a profile header
  • Goal bars with a pace marker and ahead or behind tags
  • Star-rating breakdown with partially filled stars
  • Amounts in aria-valuetext, such as $182,400 of $250,000
  • No JavaScript; the fill width comes from --v
  • Plain CSS, Bootstrap .progress and Tailwind versions of the same design

Accessibility

Skill and goal bars are role="progressbar" elements named by their visible labels through aria-labelledby, and the goal bars add aria-valuetext such as 212 of 400, 53%, behind pace. Ahead and behind are written as words, not colour alone. In the rating breakdown the bars are aria-hidden and the list has an aria-label, so each row reads as 5 stars 71%, and a visually hidden sentence gives the overall score.

Customise it

Change --sk-accent and --sk-track on .sk, and --pace on the goals card, in the plain CSS and Bootstrap versions. In Tailwind edit the sk- theme colours and the after:left-[70%] position of the pace marker.