Minimal jQuery Count Up Plugin CoutUpCircle - Download Minimal jQuery Count Up Plugin - CoutUpCircle

Download Minimal jQuery Count Up Plugin – CoutUpCircle

By Posted on

This time I will share jQuery Plugin and tutorial about Minimal jQuery Count Up Plugin – CoutUpCircle, hope it will help you in programming stack.

Minimal jQuery Count Up Plugin CoutUpCircle - Download Minimal jQuery Count Up Plugin - CoutUpCircle
File Size: 1.18 MB
Views Total: 8320
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

CoutUpCircle is a super simple jQuery counter plugin used to count up to a target number with custom step duration.

How to use it:

1. Include jQuery javascript library and the jQuery CoutUpCircle plugin in the Html page.

view source
1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2 <script type="text/javascript" src="js/jquery.countupcircle.js"></script>

2. Wrap the target number your would like to count up to in a container element.

view source
1 <div id="count-box">200</div>

3. The CSS to style the container element.

view source
01 #count-box {
02 display: block;
03 border: 2px #ccc solid;
04 color: #ccc;
05 font-size: 4em;
06 border-radius: 50%;
07 line-height: 200px;
08 height: 200px;
09 width: 200px;
10 text-align: center;
11 }

4. Call the plugin and set the duration option.

view source
1 <script type="text/javascript">
2 $(document).ready(function(){
3 $('#count-box').CountUpCircle({
4 duration: 500, // In ms, default: 5000
5 opacity_anim: false,
6 step_divider: 1
7 });
8 });
9 </script>

Change log:

2016-11-07

  • bugfixes

2014-05-26

  • New Feature: Step Divider

2014-04-25

This awesome jQuery plugin is developed by JakobVesely. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: