パーツ番号 08-02-03 ・ CSSのみ

ストライププログレスバー

縞模様が流れながらバーが伸びて繰り返すプログレス表示。WordPressのメディアアップロードやインポート処理の演出に使えます。

autocss

プレビュー

ソースコード

HTML

<div class="d08-02-03-wrap">
          <div class="d08-02-03-label"><span>アップロード中</span><span>しばらくお待ちください</span></div>
          <div class="d08-02-03-track">
            <div class="d08-02-03-bar"></div>
          </div>
        </div>

CSS

.d08-02-03-wrap{width:100%;max-width:300px}
        .d08-02-03-label{display:flex;justify-content:space-between;font-size:12px;color:#6b7280;margin-bottom:8px}
        .d08-02-03-track{
          width:100%;height:16px;border-radius:999px;background:#e5e7eb;overflow:hidden;
        }
        .d08-02-03-bar{
          height:100%;width:0;border-radius:999px;
          background:repeating-linear-gradient(45deg,#3b82f6 0 12px,#60a5fa 12px 24px);
          background-size:34px 34px;
          animation:d08-02-03-grow 3s ease-in-out infinite,d08-02-03-stripe .7s linear infinite;
        }
        @keyframes d08-02-03-grow{
          0%{width:0}
          70%{width:100%}
          100%{width:100%;opacity:0}
        }
        @keyframes d08-02-03-stripe{to{background-position:34px 0}}

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