Interactive Voice Recorder Bar

Colours in this gradient

• #0f172a
• #ef4444
• #3b82f6
• #ffffff

The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="voice-stage">
  <div class="voice-pill" id="voicePill">
    <div class="vp-record-dot"></div>
    <div class="vp-timer" id="vpTimer">00:14</div>
    <div class="vp-waveform">
      <span class="wb wb1"></span>
      <span class="wb wb2"></span>
      <span class="wb wb3"></span>
      <span class="wb wb4"></span>
      <span class="wb wb5"></span>
      <span class="wb wb6"></span>
      <span class="wb wb7"></span>
    </div>
    <div class="vp-actions">
      <button class="vp-btn btn-cancel" title="Discard">✕</button>
      <button class="vp-btn btn-send" title="Send Voice Message">▲</button>
    </div>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create an animated voice recording pill component in HTML and CSS.

Requirements:
- Compact rounded pill bar with glowing red recording pulse dot.
- Live duration timer in monospace typography.
- Animated multi-bar audio equalizer waveform using CSS keyframes and staggered delays.
- Discard and Send action buttons.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Center items horizontally inside a display: flex pill with border-radius: 999px.

2. 2

   Animate soundwave bars with transform: scaleY() and unique animation-delay values.

3. 3

   Add glowing red blinking recording dot.

Customisation tips

• Varying heights on waveform bars creates authentic microphone sensitivity visualization.

More components