
Research
PyPI Package Disguised as Instagram Growth Tool Harvests User Credentials
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
tm-odometer
Advanced tools
TmOdometer: Lightweight JavaScript library for animated numeric counters with smooth transitions and precise decimal handling.
TmOdometer is a lightweight JavaScript library for creating animated numeric counters with smooth transitions and precise decimal handling. It is ideal for projects requiring dynamic number animations.
TmOdometer is inspired by and built on top of HubSpot's Odometer library. It enhances the original functionality by introducing modern TypeScript and ES Module support, along with precise decimal handling to ensure numbers with decimal places retain their accuracy during and after animations (e.g., 1200
with a precision of 2 will display as 1200.00
). Designed for seamless integration into any JavaScript or TypeScript project, it works effortlessly with modern module systems and bundlers.
While TmOdometer is a fully standalone library, it is also used as the foundation for the Angular version, TmNgOdometer, which provides seamless integration with Angular applications.
See the TmOdometer in action below:
A quick look at the TmOdometer in action.
Click to watch the high-quality video with smooth animations and detailed UI/UX.
Install the library via npm:
npm install tm-odometer --save
Include one or more themes
<link
rel="stylesheet"
href="node_modules/tm-odometer/themes/odometer-theme-default.css"
/>
Tip: Replace
'default'
in the file path with any of the available themes:'car'
,'digital'
,'minimal'
,'plaza'
,'slot-machine'
,'train-station'
.
ES Modules:
import TmOdometer from 'tm-odometer';
Tip: If using TypeScript, types are directly provided with the library bundle.
CommonJS:
const TmOdometer = require('tm-odometer');
AMD:
require.config({
baseUrl: './src',
paths: {
'tm-odometer': 'node_modules/tm-odometer/umd/tm-odometer',
},
});
define(['tm-odometer'], function (TmOdometer) {});
Direct Inclusion
<script src="node_modules/tm-odometer/umd/tm-odometer.min.js"></script>
Once the library is imported, you can use it as follows:
const odometer = new TmOdometer({
el: document.getElementById('odometer-element'),
value: 1000,
animation: 'count',
duration: 2000,
format: '(,ddd).dd',
theme: 'default',
});
// Update the value programmatically
odometer.update(2000);
Tip: When included directly, the legacy
Odometer
constructor is also available for backward compatibility with older versions.
Another way to use the library is to add the odometer
class to any element in your HTML:
<div class="odometer">123</div>
Update the value programmatically:
document.querySelector('.odometer').innerHTML = 456;
// or
document.querySelector('.odometer').odometer.update(456);
The library supports the following configuration options:
Option | Type | Default | Description |
---|---|---|---|
el | HTMLElement | null | The DOM element where the odometer will be rendered. |
value | number | 0 | The initial value of the odometer. |
animation | string | 'slide' | Animation effect type. Options: 'slide' , 'count' . |
duration | number | 2000 (ms) | Duration of the animation in milliseconds. |
format | string | '(,ddd).dd' | Number format. Examples: '(,ddd)' → 12,345 , '(,ddd).dd' → 12,345.67 , (.ddd),dd → 12.345,67 . |
theme | string | 'default' | Theme for the odometer. Options: 'default' , 'car' , 'digital' , 'minimal' , 'plaza' , 'slot-machine' , 'train-station' . |
You can configure all odometer instances globally by defining the window.odometerOptions
object before including or importing the tm-odometer
library:
<script>
window.odometerOptions = {
animation: 'count', // Animation type ('slide' or 'count')
duration: 3000, // Animation duration in milliseconds
format: '(,ddd).dd', // Number format
theme: 'car', // Theme for all instances
};
</script>
<script src="tm-odometer/umd/tm-odometer.min.js"></script>
If you need to configure a single odometer instance differently from the global configuration, you can initialize it programmatically using the TmOdometer
constructor:
<div id="custom-odometer"></div>
<script>
const customOdometer = new TmOdometer({
el: document.getElementById('custom-odometer'),
value: 123,
animation: 'count', // Animation type ('slide' or 'count')
duration: 3000, // Animation duration in milliseconds
format: '(,ddd).dd', // Number format
theme: 'minimal', // Theme for this instance
});
// Update the value programmatically
setTimeout(() => {
customOdometer.update(4567.89);
}, 1000);
</script>
To help you get started, TmOdometer includes a comprehensive set of demos showcasing its usage with different module formats (CJS, ESM, UMD, AMD, and legacy). Each demo is a self-contained project that you can run locally.
Demo | Description |
---|---|
ESM | Demonstrates usage with native ES Modules in modern browsers. |
CJS | Demonstrates usage with CommonJS in bundlers such as Webpack or ESBuild. |
UMD Browser | Demonstrates usage with UMD bundles directly in the browser via <script> . |
UMD AMD | Demonstrates usage with AMD Modules in environments like RequireJS. |
Legacy | Demonstrates usage with the legacy version for older browsers. |
Clone the Repository:
git clone https://github.com/mtmarco87/tm-odometer.git
cd tm-odometer/demo
Run a Specific Demo:
Each demo is a mini npm project. Navigate to the desired demo folder and follow the instructions below:
For ESM, CJS, and UMD AMD Demos:
cd esm # Replace 'esm' with the desired demo folder (e.g., cjs, umd-amd)
npm install
npm start
For UMD Browser and Legacy Demos:
These demos do not require npm. Simply open the index.html
file in your browser:
cd umd-browser # Replace 'umd-browser' with 'legacy' for the legacy demo
open index.html
Explore the Code: Once the demo is running, explore the provided example to see how TmOdometer works with the selected module format. Feel free to modify the code to test different configurations, features, or integration scenarios.
Prerequisites:
Clone the Repository:
git clone https://github.com/mtmarco87/tm-odometer.git
cd tm-odometer
Install Dependencies:
npm install
gem install compass
Build the Library:
npm run build
Watch for Changes:
npm run dev
Build Package:
npm run pack
If you are looking for an Angular version of this library, check out TmNgOdometer, which builds on this project and provides seamless integration with Angular applications.
If you find this library useful, consider supporting its development:
bc1qzy6e99pkeq00rsx8jptx93jv56s9ak2lz32e2d
0x38cf74ED056fF994342941372F8ffC5C45E6cF21
This project is licensed under the MIT License. See the LICENSE
file for more details.
FAQs
TmOdometer: Lightweight JavaScript library for animated numeric counters with smooth transitions and precise decimal handling.
The npm package tm-odometer receives a total of 435 weekly downloads. As such, tm-odometer popularity was classified as not popular.
We found that tm-odometer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
Product
Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.
Security News
Research
Socket uncovered two npm packages that register hidden HTTP endpoints to delete all files on command.