Number Ticker

<quiet-number-ticker>

stable

since 1.0

Number tickers animate a number from a starting value to an ending value.

Number tickers are commonly used in dashboards for displaying totals such as sales or users, in websites showcasing milestones such as "1,000+ Customers," and in games highlighting updates such as items sold or points earned.

Restart

<div id="ticker__overview">
  <p>
    <quiet-number-ticker
      end-value="1000"
      duration="4000"
      grouping
      style="font-size: 2.5rem; font-weight: var(--quiet-font-weight-bold);"
    ></quiet-number-ticker>
  </p>
  <quiet-button>Restart</quiet-button>
</div>

<script>
  const container = document.getElementById('ticker__overview');
  const ticker = container.querySelector('quiet-number-ticker');
  const button = container.querySelector('quiet-button');

  button.addEventListener('click', () => {
    ticker.startAnimation();
  });
</script>

Number ticker honors the user's prefers-reduced-motion setting. If you're not seeing animations, this might be why. To override this behavior, which is generally not recommended, use the ignore-reduced-motion attribute.

Examples Jump to heading

Providing start and end values Jump to heading

The number ticker animates from the starting value to the ending value. By default, it counts up from 0 with no delay. Use the start-value and end-value attributes to set the ticker's range. By default, start-value is zero.

Restart

<div id="ticker__providing">
  <p>
    <quiet-number-ticker start-value="0" end-value="100"></quiet-number-ticker>
  </p>
  <quiet-button>Restart</quiet-button>
</div>

<script>
  const container = document.getElementById('ticker__providing');
  const ticker = container.querySelector('quiet-number-ticker');
  const button = container.querySelector('quiet-button');

  button.addEventListener('click', () => {
    ticker.startAnimation();
  });
</script>

Customizing the ticker Jump to heading

You can customize the duration of the ticker in milliseconds using the duration attribute. Add an optional delay before the ticker starts by setting the delay attribute.

Restart

<div id="ticker__customizing">
  <p>
    <quiet-number-ticker 
      start-value="500" 
      end-value="0" 
      duration="5000"
      delay="1000"
    ></quiet-number-ticker>
  </p>
  <quiet-button>Restart</quiet-button>
</div>

<script>
  const container = document.getElementById('ticker__customizing');
  const ticker = container.querySelector('quiet-number-ticker');
  const button = container.querySelector('quiet-button');

  button.addEventListener('click', () => {
    ticker.startAnimation();
  });
</script>

Starting when in view Jump to heading

Use the start-on-view attribute to begin the animation only when the ticker enters the viewport. This is useful for elements further down a page.

This ticker will start as soon as it enters the viewport. Refresh the page to watch again.

<p>This ticker will start as soon as it enters the viewport. Refresh the page to watch again.</p>

<quiet-number-ticker end-value="25000" start-on-view duration="4000"></quiet-number-ticker>

Grouping numbers Jump to heading

The grouping attribute adds thousand separators to the displayed number, making large numbers easier to read.

Restart

<div id="ticker__grouping">
  <p>
    <quiet-number-ticker 
      start-value="0" 
      end-value="1000000" 
      grouping 
      style="--duration: 2s;">
    </quiet-number-ticker>
  </p>
  <quiet-button>Restart</quiet-button>
</div>

<script>
  const container = document.getElementById('ticker__grouping');
  const ticker = container.querySelector('quiet-number-ticker');
  const button = container.querySelector('quiet-button');

  button.addEventListener('click', () => {
    ticker.startAnimation();
  });
</script>

Setting decimal places Jump to heading

The decimal-places attribute controls how many digits appear after the decimal point.

Restart

<div id="ticker__decimal-places">
  <p>
    <quiet-number-ticker 
      start-value="0" 
      end-value="123.456" 
      decimal-places="3" 
      style="--duration: 2s;">
    </quiet-number-ticker>
  </p>
  <quiet-button>Restart</quiet-button>
</div>

<script>
  const container = document.getElementById('ticker__decimal-places');
  const ticker = container.querySelector('quiet-number-ticker');
  const button = container.querySelector('quiet-button');

  button.addEventListener('click', () => {
    ticker.startAnimation();
  });
</script>

Localizing the value Jump to heading

You can set the lang attribute on the ticker to localize the number, including decimals and thousands separators. This example is displayed in German.

Restart

<div id="ticker__localization">
  <p>
    <quiet-number-ticker 
      start-value="0" 
      end-value="1234567.89" 
      grouping 
      decimal-places="2" 
      lang="de" 
      style="--duration: 2s;">
    </quiet-number-ticker>
  </p>
  <quiet-button>Restart</quiet-button>
</div>

<script>
  const container = document.getElementById('ticker__localization');
  const ticker = container.querySelector('quiet-number-ticker');
  const button = container.querySelector('quiet-button');

  button.addEventListener('click', () => {
    ticker.startAnimation();
  });
</script>

Listening for completion Jump to heading

Listen for the quiet-animation-complete event to trigger actions when the animation finishes.

Restart

<div id="number-ticker__complete">
  <p>
    <quiet-number-ticker 
      id="ticker" 
      start-value="0" 
      end-value="1000" 
      decimal-places="0" 
      grouping="true"
    ></quiet-number-ticker>
  </p>

  <quiet-button>Restart</quiet-button>
</div>

<script>
  const container = document.getElementById('number-ticker__complete');
  const ticker = container.querySelector('quiet-number-ticker');
  const button = container.querySelector('quiet-button');

  ticker.addEventListener('quiet-animation-complete', () => {
    console.log('Number ticker animation completed!');
  });

  button.addEventListener('click', () => {
    ticker.startAnimation();
  });
</script>

Advanced formatting Jump to heading

For advanced formatting, use the valueFormatter property to define a custom function. This overrides decimal-places and grouping. This example formats the number as kilobytes using the Intl.NumberFormat API.

Restart

<div id="ticker__value-formatter">
  <p>
    <quiet-number-ticker 
      start-value="0" 
      end-value="75000" 
      style="--duration: 2s;">
    </quiet-number-ticker>
  </p>
  <quiet-button>Restart</quiet-button>
</div>

<script>
  const container = document.getElementById('ticker__value-formatter');
  const ticker = container.querySelector('quiet-number-ticker');
  const button = container.querySelector('quiet-button');

  ticker.valueFormatter = (value) => {
    const kbValue = value / 1000;
    return new Intl.NumberFormat('en-US', {
      minimumFractionDigits: 1,
      maximumFractionDigits: 1
    }).format(kbValue) + ' kB';
  };

  button.addEventListener('click', () => {
    ticker.startAnimation();
  });
</script>

Updating dynamically Jump to heading

You can update the ticker’s value programmatically by setting the startValue and endValue properties. To animate it from its current value instead of the starting value, change the start and end values at the same time.

Increase by 50

<div id="ticker__dynamic">
  <p>
    <quiet-number-ticker end-value="100"></quiet-number-ticker>
  </p>
  <quiet-button>Increase by 50</quiet-button>
</div>

<script>
  const container = document.getElementById('ticker__dynamic');
  const ticker = container.querySelector('quiet-number-ticker');
  const button = container.querySelector('quiet-button');

  button.addEventListener('click', () => {
    ticker.startValue = ticker.endValue;
    ticker.endValue += 50;
  });
</script>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

npm

To manually import <quiet-number-ticker> from the CDN, use the following code.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/number-ticker/number-ticker.js';

To manually import <quiet-number-ticker> from npm, use the following code.

import '@quietui/quiet/dist/components/number-ticker/number-ticker.js';

Properties Jump to heading

Number Ticker has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute	Description	Type	Default
`startValue` `start-value`	The starting value for the count.	`number`	`0`
`endValue` `end-value`	The target value to count to.	`number`	`0`
`duration`	Duration of the animation in milliseconds.	`number`	`2000`
`delay`	Delay in milliseconds before counting starts.	`number`	`0`
`decimalPlaces` `decimal-places`	Number of decimal places to display.	`number`	`0`
`grouping`	Whether to group numbers, e.g. with a thousands separator.	`boolean`	`false`
`startOnView` `start-on-view`	Whether to start the animation when the component comes into view.	`boolean`	`false`
`ignoreReducedMotion` `ignore-reduced-motion`	By default, no animation will occur when the user indicates a preference for reduced motion. Use this attribute to override this behavior when necessary.	`boolean`	`false`
`valueFormatter`	A custom formatting function to apply to the number. When set, `decimal-places` and `grouping` will be ignored. Property only.	`(value: number) => string`

Events Jump to heading

Number Ticker dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events

Name	Description
`quiet-animation-complete`	Emitted when the counting animation has completed.

Number Ticker

Examples Jump to heading #

Providing start and end values Jump to heading #

Customizing the ticker Jump to heading #

Starting when in view Jump to heading #

Grouping numbers Jump to heading #

Setting decimal places Jump to heading #

Localizing the value Jump to heading #

Listening for completion Jump to heading #

Advanced formatting Jump to heading #

Updating dynamically Jump to heading #

API Jump to heading #

Importing Jump to heading #

Properties Jump to heading #

Events Jump to heading #

Examples Jump to heading

Providing start and end values Jump to heading

Customizing the ticker Jump to heading

Starting when in view Jump to heading

Grouping numbers Jump to heading

Setting decimal places Jump to heading

Localizing the value Jump to heading

Listening for completion Jump to heading

Advanced formatting Jump to heading

Updating dynamically Jump to heading

API Jump to heading

Importing Jump to heading

Properties Jump to heading

Events Jump to heading