パーツ番号 04-04-08 ・ CSSのみ

画像圧縮中インジケーター

「圧縮中…」のスピナーから完了表示へ切り替わる演出。画像アップロード前の自動最適化処理の表現に。

autocss

プレビュー

ソースコード

HTML

<div class="d04-04-08-wrap">
          <div class="d04-04-08-icon-area">
            <div class="d04-04-08-spinner"></div>
            <svg class="d04-04-08-check" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 12 10 18 20 6"></polyline></svg>
          </div>
          <div class="d04-04-08-label-area">
            <p class="d04-04-08-label d04-04-08-label1">圧縮中…</p>
            <p class="d04-04-08-label d04-04-08-label2">完了しました</p>
          </div>
        </div>

CSS

.d04-04-08 .d04-04-08-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d04-04-08 .d04-04-08-icon-area{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center}
        .d04-04-08 .d04-04-08-spinner{position:absolute;width:30px;height:30px;border:3px solid #ede9fe;border-top-color:#8b5cf6;border-radius:50%;animation:d548spin .8s linear infinite,d548spinfade 3.4s ease-in-out infinite}
        .d04-04-08 .d04-04-08-check{position:absolute;opacity:0;animation:d548checkfade 3.4s ease-in-out infinite}
        .d04-04-08 .d04-04-08-label-area{position:relative;height:16px}
        .d04-04-08 .d04-04-08-label{position:absolute;left:50%;top:0;transform:translateX(-50%);font-size:12px;margin:0;white-space:nowrap}
        .d04-04-08 .d04-04-08-label1{color:#6b7280;animation:d548spinfade 3.4s ease-in-out infinite}
        .d04-04-08 .d04-04-08-label2{color:#16a34a;opacity:0;animation:d548checkfade 3.4s ease-in-out infinite}
        @keyframes d548spin{to{transform:rotate(360deg)}}
        @keyframes d548spinfade{0%{opacity:1}70%{opacity:1}78%{opacity:0}100%{opacity:0}}
        @keyframes d548checkfade{0%{opacity:0}78%{opacity:0}88%{opacity:1}97%{opacity:1}100%{opacity:0}}

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