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

ストリーク(継続日数)カレンダー演出

出席した日のマスが順番に光りながら埋まっていくループ演出です。学習サイトの連続学習日数の可視化にぴったりです。

autocss

プレビュー

ソースコード

HTML

<div class="d09-06-06-box">
          <p class="d09-06-06-title">継続ログイン7日達成中</p>
          <div class="d09-06-06-grid">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
          </div>
        </div>

CSS

.d09-06-06-box{text-align:center}
        .d09-06-06-title{margin:0 0 14px;font-size:12.5px;font-weight:700;color:#334155}
        .d09-06-06-grid{display:flex;gap:8px}
        .d09-06-06-grid span{width:26px;height:26px;border-radius:8px;background:#e2e8f0;animation:d09-06-06-fill 6s ease-in-out infinite}
        .d09-06-06-grid span:nth-child(1){animation-delay:0s}
        .d09-06-06-grid span:nth-child(2){animation-delay:.3s}
        .d09-06-06-grid span:nth-child(3){animation-delay:.6s}
        .d09-06-06-grid span:nth-child(4){animation-delay:.9s}
        .d09-06-06-grid span:nth-child(5){animation-delay:1.2s}
        .d09-06-06-grid span:nth-child(6){animation-delay:1.5s}
        .d09-06-06-grid span:nth-child(7){animation-delay:1.8s}
        @keyframes d09-06-06-fill{
          0%,8%{background:#e2e8f0;transform:scale(1)}
          12%{background:#22c55e;transform:scale(1.15)}
          18%,92%{background:#22c55e;transform:scale(1)}
          96%,100%{background:#e2e8f0;transform:scale(1)}
        }

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