AttRibutes
Number Count
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

Number Count

Count a number from an initial value to an end value.

This Acessible Component is part of our Webflow Marketplace Library
Check out our free library
Open in Webflow

Build a Number Count in less time using Finsweet Components

CMS-powered Number Count for Webflow

Check this Component

Solution • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required attributes

Number

Add to text element that will show the count.

fs-numbercount-element
=
"
number
"

Optional attributes

Counter start

The start value for the counter.

fs-numbercount-start
=
"
VALUE
"

Counter end

The end value for the counter.

fs-numbercount-end
=
"
VALUE
"

Duration

Defines start to end duration.
Set in miliseconds, defaults to 1000.

fs-numbercount-duration
=
"
VALUE
"

Threshold

Defines when to start counting in relation to the viewport.

fs-numbercount-threshold
=
"
VALUE
"

Locale

Defines the format of the number. Accepts any BCP 47 language tag.

fs-numbercount-locale
=
"
VALUE
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-numbercount
></script>

Copy Script
2

Add these required attributes to the elements

Number

Text element that will display the count
fs-numbercount-element
=
"
number
"

The text element to be counted up or down from initial to end.

Add this attribute:
Name
fs-numbercount-element
Copy
Value
number
Copy
Elements allowed:
Text Block
WHERE TO ADD IT
IMPORTANT

If no start value is provided, the default is 0.

If no end value is provided, the default is the value of the Text Element.

3

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add options

Start

The value to start counting from
fs-numbercount-start
=
"
VALUE
"

The value to start counting from.

If counting from 1000 to 2000, the start value would be 1000.

Add this attribute:
Name
fs-numbercount-start
Copy
Value
VALUE
Copy
Add it to element with
fs-numbercount-element = "number"
IMPORTANT

If no start value is provided, the default is 0.

End

The value to end counting to
fs-numbercount-end
=
"
VALUE
"

The value where the counter stops.

If counting from 1000 to 2000, the end value would be 2000.

Add this attribute:
Name
fs-numbercount-end
Copy
Value
VALUE
Copy
Add it to element with
fs-numbercount-element = "number"
IMPORTANT

If no end value is provided, the default is the value of the Text Element.

Duration

How long the counting will take
fs-numbercount-duration
=
"
VALUE
"

Amount of time in milliseconds (ms) to count from the start to the end value.

Add this attribute:
Name
fs-numbercount-duration
Copy
Value
VALUE-IN-MS
Copy
Add it to element with
fs-numbercount-element = "number"
IMPORTANT

If no duration is defined, the default value is 1000ms (1 second).

Threshold

Define when the count should start
fs-numbercount-threshold
=
"
VALUE
"

Defines when the number count animation should start counting based on the element's scroll position on the screen.

Values are based on % of viewport.

0 = the animation starts when the element is entering from the bottom.

50 = the animation starts when the element is at the middle (50%) of the screen.

100 = the animation starts when the element is at the top of the screen.

Add this attribute:
Name
fs-numbercount-threshold
Copy
Value
VALUE
Copy
Default:
fs-numbercount-threshold = "25"
Add it to element with
fs-numbercount-element = "number"
IMPORTANT

If no threshold is defined, the default is 25.

Locale

Format the number with the provided locale
fs-numbercount-locale
=
"
{LOCALE}
"

Define the format of the number using the provided locale. Users can define any BCP 47 language tag or use auto to use the browser's locale.

Some examples below:

en-US (United States) = 1,234

pt-BR (Brazil) = 1.234

es-ES (Spain) = 1.234

Add this attribute:
Name
fs-numbercount-locale
Copy
Value
{LOCALE}
Copy
Default:
fs-numbercount-threshold = "25"
Add it to element with
fs-numbercount-element = "number"
IMPORTANT

If no threshold is defined, the default is 25.

Optional

Add more

Instances

Define an instance on a common parent wrapper

fs-numbercount-instance
=
"
IDENTIFIER
"

If you wish to create multiple instances of this solution on the same page, please follow the steps below:

  1. Select a wrapper parent that contains all the elements of an instance.
  2. Add an -instance attribute to it, with a unique value.
  3. Repeat for every instance.
Add this attribute:
Name
fs-numbercount-instance
Copy
Value
IDENTIFIER
Copy
Examples:
fs-numbercount-instance = "1"
fs-numbercount-instance = "2"
fs-numbercount-instance = "users"
fs-numbercount-instance = "likes"
Learn more ways to set up multiple instances and how it works

Build a Number Count in less time using Finsweet Components

CMS-powered Number Count for Webflow

Check this Component