<ui-number> is a web component for counting numbers. Set start, end and duration (in milliseconds).
Set iteration to -1 for infinite or use any positiive integer for a specific amount. Add an optional suffix. Target styling through ui-component::part(number) and ::part(suffix)
.ui-number-card is a container for the number and optional text, using animation-timeline to trigger the animation on scroll-entry.
Millions of adults have gained literacy skills in the last decade.
Percentage of global energy generated from renewable sources has increased significantly.
Average global life expectancy has risen by 3 years since 2000.
Percentage of Earth's terrestrial and marine areas now protected.
Millions more people have gained access to the internet over the past 5 years.
Percentage of children worldwide enrolled in primary education has increased.
Scroll down for an example on how to trigger the animations on scroll-entry.
Millions of adults have gained literacy skills in the last decade.
Percentage of global energy generated from renewable sources has increased significantly.
Average global life expectancy has risen by 3 years since 2000.
Percentage of Earth's terrestrial and marine areas now protected.
Millions more people have gained access to the internet over the past 5 years.
Percentage of children worldwide enrolled in primary education has increased.