パーツ番号 09-02-06 ・ CSSのみ

ステータスタイムライン

注文状況を点と線で表す横型タイムライン。完了ステップは色付きでチェック、現在地は脈打つドットで示します。WordPressの注文追跡や進行表示に。

autocss

プレビュー

ソースコード

HTML

<div class="d09-02-06-line">
          <div class="d09-02-06-step d09-02-06-done">
            <span class="d09-02-06-dot"><svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-11"/></svg></span>
            <span class="d09-02-06-lbl">受付</span>
          </div>
          <div class="d09-02-06-step d09-02-06-done">
            <span class="d09-02-06-dot"><svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-11"/></svg></span>
            <span class="d09-02-06-lbl">発送</span>
          </div>
          <div class="d09-02-06-step d09-02-06-now">
            <span class="d09-02-06-dot"></span>
            <span class="d09-02-06-lbl">配達中</span>
          </div>
          <div class="d09-02-06-step">
            <span class="d09-02-06-dot"></span>
            <span class="d09-02-06-lbl">完了</span>
          </div>
        </div>

CSS

.d09-02-06-line{display:flex;width:100%;max-width:320px}
        .d09-02-06-step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
        .d09-02-06-step:not(:last-child)::after{content:"";position:absolute;top:13px;left:50%;width:100%;height:3px;background:#dfe3ec}
        .d09-02-06-step.d09-02-06-done:not(:last-child)::after{background:#2fa85e}
        .d09-02-06-dot{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;background:#eef0f4;border:3px solid #dfe3ec;display:flex;align-items:center;justify-content:center}
        .d09-02-06-dot svg{width:15px;height:15px;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
        .d09-02-06-done .d09-02-06-dot{background:#2fa85e;border-color:#2fa85e}
        .d09-02-06-now .d09-02-06-dot{background:#4f46e5;border-color:#c7c2f5;animation:d266pulse 1.5s ease-in-out infinite}
        .d09-02-06-lbl{margin-top:8px;font-size:12px;color:#6b7280}
        .d09-02-06-done .d09-02-06-lbl,.d09-02-06-now .d09-02-06-lbl{color:#374151;font-weight:600}
        @keyframes d266pulse{0%,100%{box-shadow:0 0 0 0 rgba(79,70,229,.4)}50%{box-shadow:0 0 0 7px rgba(79,70,229,0)}}

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