パーツ番号 07-06-12 ・ CSSのみ

録音レベルLEDメーター演出

マイク入力を模したLED風の縦バーが不規則に伸び縮みして音量レベルを表現します。ポッドキャスト収録画面や音声入力機能のインジケーターに使えます。

cssinput

プレビュー

ソースコード

HTML

<div class="d07-06-12-wrap">
          <div class="d07-06-12-meter">
            <span class="d07-06-12-bar" style="--d:0s;--dur:1.6s"></span>
            <span class="d07-06-12-bar" style="--d:.15s;--dur:1.3s"></span>
            <span class="d07-06-12-bar" style="--d:.3s;--dur:1.8s"></span>
            <span class="d07-06-12-bar" style="--d:.05s;--dur:1.4s"></span>
            <span class="d07-06-12-bar" style="--d:.4s;--dur:1.7s"></span>
          </div>
          <p class="d07-06-12-label">● REC 録音レベル</p>
        </div>

CSS

.d07-06-12 .d07-06-12-wrap{ display:flex; flex-direction:column; align-items:center; gap:12px; }
        .d07-06-12 .d07-06-12-meter{ display:flex; gap:6px; align-items:flex-end; height:90px; }
        .d07-06-12 .d07-06-12-bar{ position:relative; width:12px; height:100%; border-radius:2px; overflow:hidden; background:repeating-linear-gradient(0deg,#e2e8f0 0 6px,#f8fafc 6px 8px); }
        .d07-06-12 .d07-06-12-bar::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:20%; border-radius:2px 2px 0 0;
          background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.55) 0 2px,transparent 2px 8px),
            linear-gradient(0deg,#22c55e 0%,#22c55e 50%,#facc15 50%,#facc15 80%,#ef4444 80%,#ef4444 100%);
          animation:d1618lv var(--dur) ease-in-out infinite;
          animation-delay:var(--d);
        }
        @keyframes d1618lv{
          0%,100%{ height:18%; }
          30%{ height:85%; }
          55%{ height:42%; }
          75%{ height:62%; }
        }
        .d07-06-12 .d07-06-12-label{ margin:0; font-size:11px; color:#6b7280; display:flex; align-items:center; gap:5px; }

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