Collection of hand-picked free HTML and pure CSS animated counter code examples from Codepen and other resources.

Related Articles

  1. CSS Counters
  2. CSS Countdown Timers

Author

  • Will Boyd

Made with

  • HTML / CSS

About a code

CSS Binary Counter

Auto-incrementing binary counter with decimal output, made with CSS animations and no JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mj Tapiru

Made with

  • HTML / CSS (SCSS)

About a code

CSS Counter

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css

Author

  • Roman Tiurin

Made with

  • HTML / CSS (Sass)

About a code

Animated counter

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jerry Low

Made with

  • HTML (Slim) / CSS (SCSS)

About a code

3D Flip Clock Counter in Pure CSS

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Siddharth Parmar

Made with

  • HTML / CSS (SCSS)

About a code

SVG Counter

CSS based SVG Path animation.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Alexander Erlandsson

Made with

  • HTML / CSS (Less)

About a code

Pure CSS Counter

Time counter made in CSS only.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jelmer

Made with

  • HTML / CSS (SCSS)

About a code

Animated Counter Element

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jake Albaugh

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Counter

Counting up with ::before & ::after content. A pure CSS counter is probably completely useless...but it is possible.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -