CountUp

The CountUp extension component uses the excellent CountUp.js widget that can be used to quickly create animations that display numerical data in a more interesting way.

wisej-extensions/Wisej.Web.Ext.CountUp at 3.5 · iceteagroup/wisej-extensionsGitHub

CountUp Source Code

Features

• Highly customizeable with a large range of options, you can even substitute numerals.

• Smart easing: CountUp intelligently defers easing until it gets close enough to the end value for easing to be visually noticeable. Configureable in the options.

Code Example

countUp1.Duration = 5000;
countUp1.TextAlign = HorizontalAlignment.Right;
countUp1.UseEasing = true;
countUp1.Value = 100;

This code sample sets some of the properties of the countUp control. Duration is set to 5000 milliseconds, or 5 seconds- so the animation will take 5 seconds to run. TextAlign is set to HorizontalAlignment.Right so the number will be aligned to the right side. UseEasing is true so the animation will use easing- that is, it will slow down towards the end of the animation. Value is set to 100 so the number being counted up to is 100.

How to Use

The CountUp extension can be added to a Wisej.NET project using NuGet Package Manager.

Wisej-3-CountUp 3.5.34nuget

You can control the Duration and also provide custom Numerals. Your application will be notified through ValueChanged and CountTerminated events.

Find more information in our JSWidgets example in C# or in VB.NET.