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

円弧状オーディオレベルメーター

円弧が音量に応じて伸び縮みを繰り返す、レベルメーター風の演出です。録音アプリやマイク入力状態の可視化表示に使えます。

cssinput

プレビュー

ソースコード

HTML

<div class="arcwrap07-12-09">
          <svg viewBox="0 0 120 120" width="150" height="150">
            <circle cx="60" cy="60" r="50" fill="none" stroke="#e5e7eb" stroke-width="8"></circle>
            <circle class="arclevel07-12-09" cx="60" cy="60" r="50" fill="none" stroke="#22c55e" stroke-width="8" stroke-linecap="round" stroke-dasharray="314" stroke-dashoffset="80" transform="rotate(-90 60 60)"></circle>
          </svg>
          <div class="arclabel07-12-09">LEVEL</div>
        </div>

CSS

.d07-12-09 .arcwrap07-12-09{ position:relative; width:150px; height:150px; display:flex; align-items:center; justify-content:center; }
        .d07-12-09 .arclevel07-12-09{ animation:arc1359wave 2.2s ease-in-out infinite; transform-origin:60px 60px; }
        @keyframes arc1359wave{
          0%,100%{ stroke-dashoffset:220; stroke:#22c55e; }
          40%{ stroke-dashoffset:60; stroke:#eab308; }
          70%{ stroke-dashoffset:130; stroke:#0ea5e9; }
        }
        .d07-12-09 .arclabel07-12-09{ position:absolute; bottom:56px; font-size:10px; letter-spacing:.12em; color:#94a3b8; font-weight:700; }
        @media (prefers-reduced-motion: reduce){
          .d07-12-09 .arclevel07-12-09{ animation:none; stroke-dashoffset:150; stroke:#0ea5e9; }
        }

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