パーツ番号 09-14-07 ・ CSSのみ

進捗バー付きトースト

下部に進捗バーを添えたトーストの静止見本。ファイルアップロードや処理中の状態を数値と視覚の両方で伝えたい場面に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="toast09-14-07">
          <div class="top09-14-07">
            <span>画像をアップロード中</span>
            <span class="pct09-14-07">72%</span>
          </div>
          <div class="bar09-14-07"><span class="fill09-14-07"></span></div>
        </div>

CSS

.d09-14-07{
          background:#f8fafc;
        }
        .d09-14-07 .toast09-14-07{
          position:absolute;
          left:50%;
          bottom:20px;
          transform:translateX(-50%);
          width:230px;
          padding:12px 16px;
          background:#0f172a;
          border-radius:9px;
          font-family:sans-serif;
          box-shadow:0 10px 22px rgba(15,23,42,.3);
        }
        .d09-14-07 .top09-14-07{
          display:flex;
          align-items:center;
          justify-content:space-between;
          margin-bottom:8px;
          font-size:12px;
          color:#f1f5f9;
        }
        .d09-14-07 .pct09-14-07{
          color:#7dd3fc;
          font-weight:700;
        }
        .d09-14-07 .bar09-14-07{
          width:100%;
          height:5px;
          border-radius:99px;
          background:#334155;
          overflow:hidden;
        }
        .d09-14-07 .fill09-14-07{
          display:block;
          width:72%;
          height:100%;
          border-radius:99px;
          background:#38bdf8;
        }

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