← 動的パーツギャラリーへ戻る

パーツ番号 05-03-06 ・ CSSのみ

チェックリスト進捗

項目が順にチェックされていくアニメーションです。WordPressの制作進行状況や導入チェックリストの表示に向いています。

css

プレビュー

ソースコード

HTML

<ul class="d05-03-06-list">
          <li><span class="d05-03-06-box"><svg viewBox="0 0 20 20"><path d="M4 10l4 4 8-9"/></svg></span>ご要望の確認</li>
          <li><span class="d05-03-06-box"><svg viewBox="0 0 20 20"><path d="M4 10l4 4 8-9"/></svg></span>お見積り提示</li>
          <li><span class="d05-03-06-box"><svg viewBox="0 0 20 20"><path d="M4 10l4 4 8-9"/></svg></span>デザイン制作</li>
          <li><span class="d05-03-06-box"><svg viewBox="0 0 20 20"><path d="M4 10l4 4 8-9"/></svg></span>公開・納品</li>
        </ul>

CSS

.d05-03-06-list{list-style:none;margin:0;padding:0;width:100%;max-width:240px}
        .d05-03-06-list li{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:13px;color:#475569}
        .d05-03-06-box{flex:none;width:24px;height:24px;border-radius:6px;border:2px solid #cbd5e1;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .3s ease,border-color .3s ease}
        .d05-03-06-box svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .4s ease}
        .d05-03-06.is-in .d05-03-06-box{background:#22c07d;border-color:#22c07d}
        .d05-03-06.is-in .d05-03-06-box svg{stroke-dashoffset:0}
        .d05-03-06.is-in .d05-03-06-list li:nth-child(1) .d05-03-06-box svg{transition-delay:.2s}
        .d05-03-06.is-in .d05-03-06-list li:nth-child(2) .d05-03-06-box svg{transition-delay:.55s}
        .d05-03-06.is-in .d05-03-06-list li:nth-child(3) .d05-03-06-box svg{transition-delay:.9s}
        .d05-03-06.is-in .d05-03-06-list li:nth-child(4) .d05-03-06-box svg{transition-delay:1.25s}
        .d05-03-06.is-in .d05-03-06-list li:nth-child(1) .d05-03-06-box{transition-delay:.2s}
        .d05-03-06.is-in .d05-03-06-list li:nth-child(2) .d05-03-06-box{transition-delay:.55s}
        .d05-03-06.is-in .d05-03-06-list li:nth-child(3) .d05-03-06-box{transition-delay:.9s}
        .d05-03-06.is-in .d05-03-06-list li:nth-child(4) .d05-03-06-box{transition-delay:1.25s}

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