# AnimatedNumber

*Category:* Components
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/components/animatedNumber
*Captured:* 2026-04-27T14:57:51.727Z

## AnimatedNumber

### Example: Example 1

Default AnimatedNumber 0 AnimatedNumber with prefix and unit +0% AnimatedNumber as simple timer Hurry up! Only 60s remaining.

#### React (tsx)

```tsx
import AnimatedNumber from '@rio-cloud/rio-uikit/AnimatedNumber';

export default () => (
    <div>
        <label>Default AnimatedNumber</label>
        <div className='width-60 margin-bottom-20 text-right text-size-h1 text-color-info'>
            <AnimatedNumber start={0} end={100} />
        </div>

        <label>AnimatedNumber with prefix and unit</label>
        <div className='width-100 margin-bottom-20 text-right text-size-h1 text-color-primary'>
            <AnimatedNumber start={0} end={100} unit='%' prefix='+' speed={50} />
        </div>

        <label>AnimatedNumber as simple timer</label>
        <div className='text-color-danger'>
            <span className='margin-right-3'>Hurry up! Only</span>
            <AnimatedNumber
                start={60}
                end={0}
                decreasing
                unit='s'
                speed={1000}
                onEnd={() => console.log('Time is up')}
            />
            <span className='margin-left-3'>remaining.</span>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div>
    <label>Default AnimatedNumber</label>
    <div class="width-60 margin-bottom-20 text-right text-size-h1 text-color-info">
        <span class="">25</span>
    </div>
    <label>AnimatedNumber with prefix and unit</label>
    <div class="width-100 margin-bottom-20 text-right text-size-h1 text-color-primary">
        <span class="">+5%</span>
    </div>
    <label>AnimatedNumber as simple timer</label>
    <div class="text-color-danger">
        <span class="margin-right-3">Hurry up! Only</span>
        <span class="">60s</span>
        <span class="margin-left-3">remaining.</span>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| start | number | — | The start value. |
| end | number | — | The end value. |
| prefix | string | — | A prefix to be added to the final string. |
| unit | string | — | A unit suffix to be added to the final string. |
| speed | number | 10 | The speed in milliseconds to count up or down. |
| decreasing | boolean | false | Enables to count backwards. |
| onEnd | VoidFunction | — | Callback function to be invoked when the end value is reached. |
| className | string | — | Additional classes to be set on the wrapping element. |