パーツ番号 09-09-05 ・ CSSのみ

タスク進捗ステータス

円形インジケーターでタスクの進捗段階を示す表示です。プロジェクト管理ツール風のタスク一覧に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-09-05-wrap">
          <div class="d09-09-05-item"><span class="d09-09-05-circle d09-09-05-c-empty"></span><span class="d09-09-05-txt">未着手</span></div>
          <div class="d09-09-05-item"><span class="d09-09-05-circle d09-09-05-c-half"></span><span class="d09-09-05-txt">進行中</span></div>
          <div class="d09-09-05-item"><span class="d09-09-05-circle d09-09-05-c-full"></span><span class="d09-09-05-txt">完了</span></div>
        </div>

CSS

.d09-09-05-wrap{display:flex;gap:22px}
        .d09-09-05-item{display:flex;flex-direction:column;align-items:center;gap:8px}
        .d09-09-05-circle{width:34px;height:34px;border-radius:50%;border:3px solid #d1d5db;box-sizing:border-box}
        .d09-09-05-c-empty{background:#fff}
        .d09-09-05-c-half{background:linear-gradient(90deg,#3b82f6 50%,#fff 50%);border-color:#3b82f6}
        .d09-09-05-c-full{background:#22c55e;border-color:#22c55e}
        .d09-09-05-txt{font-size:12px;color:#4b5563;font-family:sans-serif}

クラス名 .d09-09-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。