プレビュー
HTML
<label>Done
<progress value="0.4" max="1">40%</progress>
</label>
CSS
:root {
--ink: #3f382f;
--paper: #f7f1e6;
--accent: #8d6a3e;
--accent-2: #5a5148;
--on-accent: #fff8ee;
--muted: #8a7f72;
--line: #d8cbb8;
--chip: #efe6d4;
}
label {
display: grid;
gap: 0.3rem;
color: var(--ink);
font-size: 0.85rem;
}
progress {
width: 12rem;
height: 2px;
border: 0;
background: var(--line);
}
progress::-webkit-progress-bar { background: var(--line); }
progress::-webkit-progress-value { background: var(--ink); }
Tailwind
<style>
:root {
--ink: #3f382f;
--paper: #f7f1e6;
--accent: #8d6a3e;
--accent-2: #5a5148;
--on-accent: #fff8ee;
--muted: #8a7f72;
--line: #d8cbb8;
--chip: #efe6d4;
}
progress::-webkit-progress-bar { background: var(--line); }
progress::-webkit-progress-value { background: var(--ink); }
</style>
<label class="grid gap-[0.3rem] text-[var(--ink)] text-[0.85rem]">Done
<progress class="w-[12rem] h-[2px] [border:0] bg-[var(--line)]" value="0.4" max="1">40%</progress>
</label>