EC・商品
在庫・残数表示
「残りわずか 3点」の残量バーと控えめなパルスアニメーションで購買意欲を後押しするウィジェット。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="su-wrap">
<div class="su-product-row">
<div class="su-thumb" aria-hidden="true">
<svg viewBox="0 0 56 56" fill="none">
<rect width="56" height="56" rx="10" fill="#dce5f7"/>
<rect x="10" y="14" width="36" height="28" rx="5" fill="#2b50c7" opacity=".55"/>
<circle cx="28" cy="24" r="8" fill="#fff" opacity=".75"/>
</svg>
</div>
<div class="su-info">
<p class="su-name">プレミアム ポーチ</p>
<p class="su-price">¥3,480</p>
</div>
</div>
<div class="su-stock-area">
<div class="su-label-row">
<span class="su-dot su-pulse" aria-hidden="true"></span>
<span class="su-label">残りわずか</span>
<span class="su-count" id="suCount">3点</span>
</div>
<div class="su-bar-bg" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" aria-label="在庫残量">
<div class="su-bar-fill" id="suBarFill" style="width:15%"></div>
</div>
<p class="su-sub">このまま放置すると売り切れる可能性があります</p>
</div>
<button class="su-btn">今すぐ購入する</button>
</div>