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

ミニマル3本線の音量インジケーター

3本の細い線だけで音が鳴っている状態を表現する、極めてシンプルな音量インジケーターです。通知アイコンやチャットの発話中表示に使えます。

css

プレビュー

ソースコード

HTML

<div class="mini07-12-08">
          <span></span><span></span><span></span>
        </div>

CSS

.d07-12-08 .mini07-12-08{ display:flex; align-items:center; gap:5px; height:40px; }
        .d07-12-08 .mini07-12-08 span{ width:5px; height:100%; border-radius:3px; background:#4f46e5; animation:mini1358wave 0.9s ease-in-out infinite; }
        .d07-12-08 .mini07-12-08 span:nth-child(1){ animation-delay:-0.6s; }
        .d07-12-08 .mini07-12-08 span:nth-child(2){ animation-delay:-0.3s; }
        .d07-12-08 .mini07-12-08 span:nth-child(3){ animation-delay:0s; }
        @keyframes mini1358wave{
          0%,100%{ transform:scaleY(0.3); }
          50%{ transform:scaleY(1); }
        }
        @media (prefers-reduced-motion: reduce){
          .d07-12-08 .mini07-12-08 span{ animation:none; transform:scaleY(0.6); }
        }

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