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

チャンク分割アップロード可視化

ファイルが複数の小片に分かれて順番に送信されていくイメージ演出。大容量ファイルの分割送信表現に。

clickcssinput

プレビュー

ソースコード

HTML

<div class="d04-04-09-wrap">
          <div class="d04-04-09-chunks">
            <span class="d04-04-09-chunk"></span><span class="d04-04-09-chunk"></span><span class="d04-04-09-chunk"></span><span class="d04-04-09-chunk"></span>
            <span class="d04-04-09-chunk"></span><span class="d04-04-09-chunk"></span><span class="d04-04-09-chunk"></span><span class="d04-04-09-chunk"></span>
          </div>
          <p class="d04-04-09-label">ファイルを分割して送信中…</p>
        </div>

CSS

.d04-04-09 .d04-04-09-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:200px}
        .d04-04-09 .d04-04-09-chunks{display:flex;gap:4px}
        .d04-04-09 .d04-04-09-chunk{width:16px;height:22px;border-radius:3px;background:#e5e7eb;animation:d549fill 3.2s ease-in-out infinite}
        .d04-04-09 .d04-04-09-chunk:nth-child(1){animation-delay:0s}
        .d04-04-09 .d04-04-09-chunk:nth-child(2){animation-delay:.15s}
        .d04-04-09 .d04-04-09-chunk:nth-child(3){animation-delay:.3s}
        .d04-04-09 .d04-04-09-chunk:nth-child(4){animation-delay:.45s}
        .d04-04-09 .d04-04-09-chunk:nth-child(5){animation-delay:.6s}
        .d04-04-09 .d04-04-09-chunk:nth-child(6){animation-delay:.75s}
        .d04-04-09 .d04-04-09-chunk:nth-child(7){animation-delay:.9s}
        .d04-04-09 .d04-04-09-chunk:nth-child(8){animation-delay:1.05s}
        .d04-04-09 .d04-04-09-label{font-size:11px;color:#6b7280;margin:0}
        @keyframes d549fill{0%{background:#e5e7eb}15%{background:#8b5cf6}35%{background:#c4b5fd}100%{background:#e5e7eb}}

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