tp-elements

Repositories

44

Projects Packages

@tp/tp-timeout-strip (1.0.1)

Published 2025-07-31 15:57:00 +02:00 by pk in tp-elements/tp-timeout-strip

Installation

Setup this registry in your project .npmrc file:

@tp:registry=

To install the package using npm, run the following command:

npm install @tp/tp-timeout-strip@1.0.1

or add it to the package.json file:

"@tp/tp-timeout-strip": "1.0.1"

For more information on the npm registry, see the documentation.

About this package

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;
}

Dependencies

Dependencies

ID	Version
lit	^3.0.0

Details

npm

tp-elements/tp-timeout-strip

2025-07-31 15:57:00 +02:00

144

trading_peter

Apache-2.0

latest

5.2 KiB

Assets (1)

tp-timeout-strip-1.0.1.tgz 5.2 KiB

Versions (2) View all

1.0.1 2025-07-31

1.0.0 2025-02-18

Issues