TotpCountdown
TOTP countdown component displays verification code expiration with an SVG ring and a countdown number. The progress bar is driven by requestAnimationFrame with smooth color transition from Teal → Yellow → Red.
Basic Usage
Default 30-second countdown.
vue
<TTotpCountdown />Custom Size & Stroke
Adjust ring diameter via size and stroke thickness via stroke-width.
vue
<TTotpCountdown :size="80" />
<TTotpCountdown :size="100" :stroke-width="8" />Segment Color Mode
Set color-mode="segments" for abrupt color changes at 50% and 20% remaining.
vue
<TTotpCountdown color-mode="segments" />Hide Text
Set :show-seconds="false" to hide the countdown number and show only the ring.
vue
<TTotpCountdown :show-seconds="false" />Controlled Mode
Use ref to call pause(), resume(), and reset() methods.
vue
<script setup>
const countdownRef = ref(null)
const paused = ref(false)
</script>
<TTotpCountdown ref="countdownRef" />
<button @click="countdownRef?.pause()">Pause</button>
<button @click="countdownRef?.resume()">Resume</button>
<button @click="countdownRef?.reset()">Reset</button>Custom Duration
Set a different countdown duration via :total-seconds.
vue
<TTotpCountdown :total-seconds="60" />
<TTotpCountdown :total-seconds="15" />Sector Variant
Set variant="sector" to display the countdown as a pie chart sector.
vue
<TTotpCountdown variant="sector" />
<TTotpCountdown variant="sector" :show-seconds="false" />
<TTotpCountdown variant="sector" :size="80" />API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
total-seconds | number | 30 | Total countdown duration (seconds) |
size | number | 60 | Ring diameter (px) |
stroke-width | number | 4 | Stroke thickness (px), ring mode only |
show-seconds | boolean | true | Show countdown number at center |
color-mode | 'gradient' | 'segments' | 'gradient' | Color mode: smooth gradient / segment |
variant | 'ring' | 'sector' | 'ring' | Visual variant: ring / pie sector |
Emits
| Event | Parameters | Description |
|---|---|---|
finish | — | Countdown finished |
tick | remaining: number | Heartbeat every second |
Expose
| Method | Description |
|---|---|
pause() | Pause countdown |
resume() | Resume countdown |
reset() | Reset countdown |