Zen Counter

concrete CMS block with which you can quickly create an animated counter that starts running when the block is visible.

Installation Instructions

  • Unzip this file in your site's packages/ directory.
  • Login to your site as an administrator.
  • Find the "Add Functionality" page in your dashboard.
  • Find this package in the list of packages awaiting installation.
  • Click the "install" button.

Basic settings

  • Font Awesome Icon (option)
  • title (option)
  • description (option)


Counter settings

  • Start value
  • End value
  • Decimal places
  • Duration
  • Ease animation
  •  Smart Easing Threshold Smooth
  • Smart Easing Amount
  • Use grouping
  • Grouping separator
  • Decimal
  • Prefix
  • Suffix
  • Numeral glyph substitution

Appear.js settings

  • reappear (The counter will restart when the counter is back in viewport.)
  • bounds (Bounds increase, in pixels, to the threshold size of the element so it can be "viewable" before it is actually in the viewport.)

The Zen Counter is based on countUp.js and appear.js

Zen Counter Demo