TimeredCounter Documentation

website·Indexed 29 days ago

https://timered-counter.netlify.app

A library for creating scrolling number and data effects. Features include simple scrolling effects, custom animations, custom styling, localization (internationalization), and Vue integration. Supports import via CDN and provides a runtime API.

Tokens: 5.2K
Snippets: 27
Records: 54
Agent score: 72%

What's inside TimeredCounter

Overview of TimeredCounter Web Component
TimeredCounter is a Web Components library designed to display numerical changes with integrated animation effects. It is particularly useful for adding dynamic visual elements to landing pages, real-time data displays, and statistical counters. It leverages the Web Animation API for high performance and supports internationalization via the JavaScript Intl API.
https://timered-counter.netlify.app/llms-full.txt?llms-doc=timeredcounter-what-is-timered-counterwebsitellms
Overview of TimeredCounter scrolling components
TimeredCounter provides specialized components to create smooth scrolling transitions for different data types. Using default configurations is sufficient to achieve a polished scrolling effect.
https://timered-counter.netlify.app/llms-full.txt?llms-doc=simple-usagewebsitellms
Overview of TimeredCounter Web Component
TimeredCounter is a Web Component used to display value changes with animation effects. It is particularly suitable for real-time data, statistical displays, and countdowns. It leverages the Web Animation API for high performance and supports internationalization via the JavaScript Intl API.
https://timered-counter.netlify.app/llms-full.txt?llms-doc=what-is-timeredcounter-what-is-timered-counterwebsitellms
Implement scrolling effects for different data types with TimeredCounter
TimeredCounter provides specialized components to create smooth scrolling transitions for different data types. The default configuration is sufficient for basic scrolling effects.
https://timered-counter.netlify.app/llms-full.txt?llms-doc=simple-scrolling-effects-simple-usagewebsitellms
Understand TimeredCounter component structure
The TimeredCounter component is composed of a hierarchical structure designed for rolling number displays. The hierarchy is as follows: part -> digit -> cell. Additionally, a suffix (optional) can be attached to a part to display units such as 'day' or 'hour'.
https://timered-counter.netlify.app/llms-full.txt?llms-doc=timeredcounter-timered-counter-in-depthwebsitellms
Understand TimeredCounter component structure
The TimeredCounter component is organized in a hierarchical structure to allow granular control over animations and styles. The hierarchy is: part -> digit -> cell. Additionally, a suffix (optional) can be attached to a part to display time units like 'day' or 'hour'.
https://timered-counter.netlify.app/llms-full.txt?llms-doc=in-depth-timeredcounter-timered-counter-in-depthwebsitellms

Use TimeredCounter via CDN (ES Module Build)

Use the ES module build of TimeredCounter by specifying type="module" in the script tag. This is supported by most modern browsers.

<script type="module" src="https://cdn.jsdelivr.net/npm/timered-counter/dist/timered-counter.esm-browser.js"></script>

<div id="demo" style="font-size: 36px; text-align: center;">
  <timered-counter-string value="123456789" initial-value="0"></timered-counter-string>
</div>

Install and import TimeredCounter via npm
Install the timered-counter package using a package manager and import it into your project to enable the custom elements.
```
# Using npm
npm install timered-counter --save

# Using pnpm
pnpm add timered-counter

# Using yarn
yarn add timered-counter
```
```
import "timered-counter";
```
https://timered-counter.netlify.app/llms-full.txt?llms-doc=getting-started-getting-startedwebsitellms
Basic usage of TimeredCounter
TimeredCounter automatically handles the animation of incrementing and decrementing numbers. To trigger an animation, you only need to update the numerical value provided to the component or instance; the library manages the transition and timing automatically.
https://timered-counter.netlify.app/llms-full.txt?llms-doc=getting-startedwebsitellms
Apply custom colors to Timered Counter
The Timered Counter supports custom fill colors to change the visual appearance of the numbers.
https://timered-counter.netlify.app/llms-full.txt?llms-doc=custom-styles-styled-usagewebsitellms
Use TimeredCounter via CDN (Global Build)
Include the global build of TimeredCounter using a <script> tag. This exposes the API on a global TimeredCounter object and is suitable for static HTML pages without a build step.
```
<script src="https://cdn.jsdelivr.net/npm/timered-counter/dist/timered-counter.global.js"></script>

<div style="font-size: 36px; text-align: center;">
  <timered-counter-string value="123456789" initial-value="0"></timered-counter-string>
</div>
```
https://timered-counter.netlify.app/llms-full.txt?llms-doc=getting-startedwebsitellms
Update values in TimeredCounter for automatic animations
To trigger an increment or decrement animation in TimeredCounter, you only need to update the value of the counter. The component automatically detects the change and handles the transition animation between the old and new values.
https://timered-counter.netlify.app/llms-full.txt?llms-doc=getting-started-getting-startedwebsitellms