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

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

アップロード完了→サムネイル切替

進捗が完了するとファイルアイコンが画像サムネイル風カードへ切り替わる。商品画像登録フォームなどに最適。

jsinput

プレビュー

ソースコード

HTML

<div class="d04-04-03-card">
          <div class="d04-04-03-icon-wrap">
            <svg class="d04-04-03-file" viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
              <polyline points="14 2 14 8 20 8"></polyline>
            </svg>
            <div class="d04-04-03-thumb"></div>
          </div>
          <div class="d04-04-03-bar"><div class="d04-04-03-fill"></div></div>
          <p class="d04-04-03-label">design.jpg / アップロード中…</p>
        </div>

CSS

.d04-04-03 .d04-04-03-card{width:100%;max-width:180px;display:flex;flex-direction:column;align-items:center;gap:10px}
        .d04-04-03 .d04-04-03-icon-wrap{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
        .d04-04-03 .d04-04-03-file{position:absolute;transition:opacity .4s ease}
        .d04-04-03 .d04-04-03-thumb{position:absolute;inset:0;border-radius:8px;background:linear-gradient(135deg,#a78bfa,#f472b6);opacity:0;transition:opacity .4s ease,transform .4s ease;transform:scale(.8)}
        .d04-04-03 .d04-04-03-card.done .d04-04-03-file{opacity:0}
        .d04-04-03 .d04-04-03-card.done .d04-04-03-thumb{opacity:1;transform:scale(1)}
        .d04-04-03 .d04-04-03-bar{width:100%;height:6px;background:#e5e7eb;border-radius:4px;overflow:hidden}
        .d04-04-03 .d04-04-03-fill{height:100%;width:0%;background:linear-gradient(90deg,#818cf8,#8b5cf6);border-radius:4px;transition:width .1s linear}
        .d04-04-03 .d04-04-03-label{font-size:11px;color:#6b7280;margin:0}

JavaScript

(function(){
          var root=document.currentScript.closest('.item');
          var card=root.querySelector('.d04-04-03-card');
          var fill=root.querySelector('.d04-04-03-fill');
          var label=root.querySelector('.d04-04-03-label');
          var v=0, waiting=false;
          setInterval(function(){
            if(waiting) return;
            v+=1.2;
            if(v>=100){
              v=100;
              waiting=true;
              card.classList.add('done');
              label.textContent='design.jpg / アップロード完了';
              setTimeout(function(){
                v=0;
                card.classList.remove('done');
                label.textContent='design.jpg / アップロード中…';
                waiting=false;
              },1800);
            }
            fill.style.width=v+'%';
          },70);
        })();

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