Odometer

A Web Component that displays a numeric value with a smooth rolling animation — similar to a mechanical odometer or number counter. It’s designed for use in badges, notifications, dashboards, or any place where numbers change dynamically.

Code

<bl-odometer id="basicOdometer"></bl-odometer>

<div class="btn-group" role="group">
    <button class="btn blue-btn-soft-secondary" onclick="basicOdometer.value--" aria-label="Decrement">➖</button>
    <button class="btn blue-btn-soft-secondary" onclick="basicOdometer.value++" aria-label="Increment">➕</button>
</div>

Styled as badge

Code

<button type="button" class="btn btn-outline-primary">
    <span aria-hidden="true">🔔</span> Notifications
    <span class="badge bg-primary-subtle text-primary-emphasis">
        <bl-odometer id="badgeOdometer" value="2"></bl-odometer>
    </span>
</button>

<div class="btn-group" role="group">
    <button class="btn blue-btn-soft-secondary" onclick="badgeOdometer.value--" aria-label="Decrement">➖</button>
    <button class="btn blue-btn-soft-secondary" onclick="badgeOdometer.value++" aria-label="Increment">➕</button>
</div>

Custom max number

Code

<bl-odometer id="maxOdometer" value="89" max="99"></bl-odometer>

<div class="btn-group" role="group">
    <button class="btn blue-btn-soft-secondary" onclick="maxOdometer.value--" aria-label="Decrement">➖</button>
    <button class="btn blue-btn-soft-secondary" onclick="maxOdometer.value++" aria-label="Increment">➕</button>
</div>

Grab the code

When you don't use the entire Blue Web library, you can also just copy and paste the required code into your own project.

Copy and paste the following code into your project. Source: @/src/js/odometer.ts

Edit post on GitHub