パーツ番号 04-04-01 ・ JavaScript使用
複数ファイル同時アップロード進捗リスト
複数ファイルの進捗バーが個別に伸びていく一覧表示。問い合わせフォームや投稿フォームの複数添付UIに使える。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。