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

パーツ番号 04-04-01 ・ JavaScript使用

複数ファイル同時アップロード進捗リスト

複数ファイルの進捗バーが個別に伸びていく一覧表示。問い合わせフォームや投稿フォームの複数添付UIに使える。

jsinput

プレビュー

ソースコード

HTML

<div class="d04-04-01-list">
          <div class="d04-04-01-row">
            <span class="d04-04-01-name">design.jpg</span>
            <div class="d04-04-01-bar"><div class="d04-04-01-fill" data-i="0"></div></div>
            <span class="d04-04-01-pct" data-i="0">0%</span>
          </div>
          <div class="d04-04-01-row">
            <span class="d04-04-01-name">report.pdf</span>
            <div class="d04-04-01-bar"><div class="d04-04-01-fill" data-i="1"></div></div>
            <span class="d04-04-01-pct" data-i="1">0%</span>
          </div>
          <div class="d04-04-01-row">
            <span class="d04-04-01-name">video.mp4</span>
            <div class="d04-04-01-bar"><div class="d04-04-01-fill" data-i="2"></div></div>
            <span class="d04-04-01-pct" data-i="2">0%</span>
          </div>
        </div>

CSS

.d04-04-01 .d04-04-01-list{width:100%;max-width:230px;display:flex;flex-direction:column;gap:12px}
        .d04-04-01 .d04-04-01-row{display:flex;align-items:center;gap:8px}
        .d04-04-01 .d04-04-01-name{width:66px;font-size:11px;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
        .d04-04-01 .d04-04-01-bar{flex:1;height:7px;background:#e5e7eb;border-radius:4px;overflow:hidden}
        .d04-04-01 .d04-04-01-fill{height:100%;width:0%;border-radius:4px;background:linear-gradient(90deg,#818cf8,#8b5cf6)}
        .d04-04-01 .d04-04-01-pct{width:32px;text-align:right;font-size:11px;color:#6b7280;flex-shrink:0}

JavaScript

(function(){
          var root = document.currentScript.closest('.item');
          var fills = root.querySelectorAll('.d04-04-01-fill');
          var pcts = root.querySelectorAll('.d04-04-01-pct');
          var speeds = [0.7,0.5,0.9];
          var vals = [0,-40,-80];
          setInterval(function(){
            for(var i=0;i<fills.length;i++){
              vals[i]+=speeds[i];
              if(vals[i]>100) vals[i]=-30;
              var v=Math.max(0,Math.min(100,vals[i]));
              fills[i].style.width=v+'%';
              pcts[i].textContent=Math.round(v)+'%';
            }
          },80);
        })();

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