Animated Number

Animated numbers provide a signifier that values are being changed.

This is part of the design system extended layer 🤝 Questions or feedback? Reach out to #ux on slack, #gitlab-ui on slack, @gitlab-com/gitlab-ux/designers or @gitlab-org/maintainers/gitlab-ui on GitLab.

Examples

<script>
export default {
  data() {
    return {
      updatedNumber: 100,
    };
  },
  methods: {
    updateNumber() {
      this.updatedNumber = Math.floor(Math.random() * 100);
    },
  },
};
</script>

<template>
  <div>
    <gl-animated-number :number="updatedNumber" :duration="1000" />
    <button @click="updateNumber">Update number</button>
  </div>
</template>

Code reference

GlAnimatedNumber

The animated number component can be used with or without decimal places. Decimal places will not be rounded if chosen to be omitted.

import { GlAnimatedNumber } from '@gitlab/ui';

Props

Name
Description
Default

number Required

number The numeric value to animate.

—

duration

number Controls how long it takes for the animation to complete.

2000

decimalPlaces

number Controls the number of decimal places displayed in the output.

0

useDelimiters

boolean When true, formats the number with digit group separators.

false

animateOnMount

boolean When true, animates the number when the component is mounted.

false

Events

Name
Description
animating

animated

Last updated at: