Animating currency with leading or trailing 0s (Includes workaround)

[adamschwartz]

We get a lot of questions about currency formatting, leading and trailing 0s, etc.

• How can I animate from $000.00 to $012.30?
• How can I animate from 0.00 to 0.50?
• How can I animate from 00000 to 01234?
• How about other currency symbols?
• etc.

The workaround below seeks to temporarily address all of these concerns and more.

---

Here’s the result.

  

How does this work?

There are a number CSS tricks involved to make this work, but the basic idea is simple: add digits before and after the number you want to animate, and hide them with CSS.

Here’s how the example above works:

The goal is to animate from $000.00 to $012.30, so instead we add a digit to the front and back, telling Odometer to animate from 1000.001 to 1012.301.

To get the third decimal point to show, we change the default formatting option from '(,ddd).dd' to '(,ddd).ddd', with this JS:

window.odometerOptions = {
  format: '(,ddd).ddd'
};

Next, we hide the first and last digits, and the formatting comma, with this CSS:

.odometer .odometer-inside .odometer-digit:first-child,
.odometer .odometer-inside .odometer-formatting-mark:nth-child(2),
.odometer .odometer-inside .odometer-digit:last-child {
    display: none
}

Finally, we add the trailing “$” with a CSS pseudo element:

.odometer .odometer-inside:before {
    content: "$"
}

Additional, in this particular example, we added these styles for a large-green-money aesthetic (although none of this was required):

.odometer {
    font-size: 100px;
    color: #27B157
}

.odometer .odometer-inside:before {
    display: inline-block;
    vertical-align: sup;
    opacity: .6;
    font-size: .85em;
    margin-right: .12em
}

And that’s it!

Again, please note, this is implemented entirely using CSS tricks and is not the official solution to these issues. It is only intended as a temporary workaround until we can solve these formatting issues in a better way. But I sincerely I hope it helps people out in the meantime.