Basic demos, Interactivity demos. Reload this page to restart the demos.
This message will self-destruct in 7.5 seconds and includes a countdown pie chart.
Tap this message to prevent the self-destruct from happening.
<self-destruct ttl="7.5s" progress="pie" on-click="prevent">…</self-destruct>
This message will self-destruct in 15 seconds, with an included seconds countdown, placed into the first `.countdown` element.
Tap this message to pause/resume the countdown.
<self-destruct ttl="15s" progress="seconds" progress-target=".countdown" on-click="pause">…</self-destruct>
This message will self-destruct in 15 seconds, with an included countdown bar.
Tap this message to reset the countdown.
<self-destruct ttl="15s" progress="bar" on-click="reset">…</self-destruct>
This message will only self-destruct with the close button.
<self-destruct ttl="0">… <button … class="self-destruct">…</button></self-destruct>
Hover to prevent self-destruct; click to close.
Hover to pause self-destruct.
Hover to reset self-destruct timer.