tp-elements

Repositories

36

Projects Packages

@tp/tp-timeout-strip (1.0.0)

Published 2025-02-18 22:44:41 +01:00 by pk

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.0

or add it to the package.json file:

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

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

2025-02-18 22:44:41 +01:00

0

trading_peter

Apache-2.0

latest

5.2 KiB

Assets (1)

tp-timeout-strip-1.0.0.tgz 5.2 KiB

Versions (1) View all

1.0.0 2025-02-18