Code Monkey home page Code Monkey logo

jquery.countup.js's Introduction

jquery.countup.js

jquery.countup.js is a jQuery plugin that animates a number from zero (counting up towards it). It supports counting up:

  • integers 12345
  • floats 0.1234
  • formatted numbers 1,234,567.00

Features:

  • Auto-detect for integers, floats or formatted numbers
  • The plugin will also use the number of decimal places the original number is using.
  • Lightweight: ~1kb
  • Minimal setup

Install

You can use npm or bower.

npm install jquery.countup.js

or

bower install jquery.countup.js

Dependencies

Package dependencies: jquery and waypoints.

Usage

Includes

<script src="jquery.min.js"></script>
<script src="jquery.waypoints.min.js"></script>
<script src="jquery.countup.min.js"></script>

HTML

<span class="counter">1,498,547.00</span>
<span>$</span><span class="counter">7.99</span>
<span class="counter">1455455</span>

You can use data-counter-time and data-counter-delay.

<span class="counter" data-counter-time="5000" data-counter-delay="50">1981</span><br><br><br>
<span class="counter" data-counter-time="100" data-counter-delay="20">9842</span><br><br><br>

Jquery

$('.counter').countUp();

or with extra parameters (default options)

$('.counter').countUp({
    delay: 10,
    time: 2000
});
  • delay - The delay in milliseconds per number count up
  • time - The total duration of the count up animation

Note: These values are overwritten with data elements.

Social Stuff

jquery.countup.js's People

Contributors

adrigm avatar

Watchers

Xiao Wenjie avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.