tp-timeout-strip/README.md

tp-timeout-strip

Shows a small color strip that decreases in size over time to indicate a delay is currently elapsing. Can be used to indicate when a temporary popup will be automatically be closed.

Installation

npm install @tp/tp-timeout-strip

Usage

<tp-timeout-strip></tp-timeout-strip>

const strip = document.querySelector('tp-timeout-strip');

// Show the strip and start the timeout animation (3000ms = 3 seconds)
strip.show(3000);

// Listen for when the timeout completes
strip.addEventListener('timeout', () => {
  console.log('Timeout elapsed!');
});

Styling

The component can be customized using CSS custom properties:

tp-timeout-strip {
  /* Change the strip color (default: #000) */
  --tp-timeout-strip-color: #ff4444;
  
  /* Change the strip height (default: 3px) */
  --tp-timeout-strip-width: 4px;
}