statsOmeter - A jQuery Odometer Statistics Counter Plugin

About


Show your stats with this animated odometer style plugin. Stats are displayed by animation on the counter as they are scrolled into focus. You can use it for traditional numeric data stats as well as words. Easy to setup for new to advanced web developers. Supports 2 themes to start and can be custom themed any way you like. If you like the plugin, please give me a like on Facebook or a Google+.

Cool Features
  • Supports Letter Characters as well as Numeric
  • Mobile Friendly
  • Animates when scrolled in view
  • Multiple stats support
  • Auto-centered
  • Easy to setup

Demo


Scroll below to see in action.

Social Shares

Clients

Lines of Code


Cups of Coffee

Energy Drinks

Happy Hours


Facebook Likes

Instagram Followers

Twitter Followers


Projects

Products Sold

Subscribers

Instructions


  1. Create a div with a specific class name and add that class name to the function settings
  2. Add the path to the CSS file for statsOmeter.(see below)
  3. Add a path to the plugin and add the function call code below with the theme settings for "so_value" and so_theme". The "so_value" is your stat number or letters, remember only numeric and letter values, some optional characters allowed, see below for "Helpful Tips" on what's allowed. The "so_theme" setting is really a class name to theme your stat counter. There are 2, one by default("so-theme_stock") and optional ("so-theme_heat"). These use CSS gradients to theme. You can change them to whatever you like or remove the gradient backgrounds and style differently.

CSS Link

<link href="css/statsOmeter.css" rel="stylesheet" type="text/css"/>

HTML Code

<div class='mystat'></div>
jQuery Code

<script src='js/statsOmeter.min.js'></script>
<script> 
 $('.mystat').statsOmeter({
	so_value: "1768",
	 so_theme: "so-theme_stock"
});
</script>
DOWNLOAD: statsOmeter.zip
Plugin Info:
  • Version: 0.1
  • Pluign Type: jQuery
  • Last Update: 06/06/2017
  • License: GNU 2
  • File Size: minified @ 5KB
  • jQuery 3.0.0 compatible
  • Author: Mark Hawkins - www.markhawkinsdesigns.com
Important How to Use TIPS
  • Lower case letters only
  • No Spaces
  • Characters suported are only: 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z ) ( : ! - +
  • You can create a happy and sad face via charcters like so: :) :(
  • You can change Character capitals to lowercase with CSS
  • There is a limit best practice of 14 characters max for current character box size for mobile. If you style the counter to be larger, keep in mind mobile devices.