1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > jQuery Animatenumber by Aishek</ title >
7+ < meta name ="description " content ="jQuery animate number ">
8+ < meta name ="author " content ="aishek ">
9+ < meta name ="robots " content ="index, follow ">
10+ <!-- Canonical URL -->
11+ < link rel ="canonical " href ="https://codehimblog.github.io/jquery-plugins/jquery-animatenumber-by-aishek.html ">
12+ <!-- Favicon -->
13+ < link rel ="icon " href ="/favicon.ico " type ="image/png ">
14+ <!-- Bootstrap CSS -->
15+ < link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css " rel ="stylesheet ">
16+ <!-- Bootstrap Icons -->
17+ < link href ="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css " rel ="stylesheet ">
18+ < link rel ="stylesheet " href ="/css/styles.css ">
19+ </ head >
20+ < body >
21+ <!-- Navbar -->
22+ < nav class ="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ">
23+ < div class ="container ">
24+ < a class ="navbar-brand " href ="https://codehimblog.github.io ">
25+ < i class ="bi bi-box-seam me-2 "> </ i > CodehimBlog
26+ </ a >
27+ < button class ="navbar-toggler " type ="button " data-bs-toggle ="collapse " data-bs-target ="#navbarNav " aria-controls ="navbarNav " aria-expanded ="false " aria-label ="Toggle navigation ">
28+ < span class ="navbar-toggler-icon "> </ span >
29+ </ button >
30+ < div class ="collapse navbar-collapse " id ="navbarNav ">
31+ < ul class ="navbar-nav ms-auto ">
32+ < li class ="nav-item ">
33+ < a class ="nav-link " href ="https://codehimblog.github.io/ "> < i class ="bi bi-house-door me-1 "> </ i > Home</ a >
34+ </ li >
35+ < li class ="nav-item ">
36+ < a class ="nav-link " href ="https://codehimblog.github.io/projects/ "> < i class ="bi bi-box me-1 "> </ i > Projects</ a >
37+ </ li >
38+ < li class ="nav-item ">
39+ < a class ="nav-link " href ="https://codehimblog.github.io/about.html "> < i class ="bi bi-book me-1 "> </ i > About</ a >
40+ </ li >
41+ < li class ="nav-item ">
42+ < a class ="nav-link " href ="https://codehimblog.github.io/contact.html "> < i class ="bi bi-envelope me-1 "> </ i > Contact</ a >
43+ </ li >
44+ </ ul >
45+ </ div >
46+ </ div >
47+ </ nav >
48+
49+ <!-- Breadcrumbs -->
50+ < div class ="container mt-4 breadcrumbs ">
51+ < nav aria-label ="breadcrumb ">
52+ < ol class ="breadcrumb mb-0 ">
53+ < li class ="breadcrumb-item "> < a href ="https://codehimblog.github.io/ "> Home</ a > </ li >
54+ < li class ="breadcrumb-item "> < a href ="https://codehimblog.github.io/jquery-plugins/ "> jQuery Plugins</ a > </ li >
55+ < li class ="breadcrumb-item active " aria-current ="page "> jQuery Animatenumber</ li >
56+ </ ol >
57+ </ nav >
58+ </ div >
59+
60+ <!-- Schema Markup for Breadcrumbs -->
61+ < script type ="application/ld+json ">
62+ {
63+ "@context" : "https://schema.org" ,
64+ "@type" : "BreadcrumbList" ,
65+ "itemListElement" : [
66+ {
67+ "@type" : "ListItem" ,
68+ "position" : 1 ,
69+ "name" : "Home" ,
70+ "item" : "https://codehimblog.github.io/"
71+ } ,
72+ {
73+ "@type" : "ListItem" ,
74+ "position" : 2 ,
75+ "name" : "jQuery Plugins" ,
76+ "item" : "https://codehimblog.github.io/jquery-plugins/"
77+ } ,
78+ {
79+ "@type" : "ListItem" ,
80+ "position" : 3 ,
81+ "name" : "jQuery Animatenumber" ,
82+ "item" : "https://codehimblog.github.io/projects/{{packageSlug}}"
83+ }
84+ ]
85+ }
86+ </ script >
87+ <!-- Main Content -->
88+ < div class ="container mt-3 ">
89+ < div class ="row ">
90+ <!-- Main Details -->
91+ < main class ="col-md-8 site-main p-0 ">
92+ < article >
93+ <!-- Project Name & Description -->
94+ < h1 id ="packageName "> jQuery Animatenumber</ h1 >
95+ < p id ="packageDescription " class ="text-muted "> jQuery animate number</ p >
96+
97+
98+
99+ <!-- Statistics -->
100+ < div class ="stat-row d-flex justify-content-around align-items-center text-center mb-2 ">
101+ < div class ="stat-box d-flex align-items-center flex-column-mobile ">
102+ < i class ="bi bi-star-fill text-warning mb-2 "> </ i >
103+ < div >
104+ < span id ="stargazersCount " class ="stat-value "> 770</ span >
105+ < p class ="stat-label mb-0 "> Stars</ p >
106+ </ div >
107+ </ div >
108+
109+ < div class ="stat-box d-flex align-items-center flex-column-mobile ">
110+ < i class ="bi bi-box-arrow-in-down mb-2 "> </ i >
111+ < div >
112+ < span id ="repoSize " class ="stat-value "> 0.1 MB</ span >
113+ < p class ="stat-label mb-0 "> Size</ p >
114+ </ div >
115+ </ div >
116+
117+ < div class ="stat-box d-flex align-items-center flex-column-mobile ">
118+ < i class ="bi bi-arrow-repeat text-secondary mb-2 "> </ i >
119+ < div >
120+ < span id ="forksCount " class ="stat-value "> 171</ span >
121+ < p class ="stat-label mb-0 "> Forks</ p >
122+ </ div >
123+ </ div >
124+
125+ < div class ="stat-box d-flex align-items-center flex-column-mobile ">
126+ < i class ="bi bi-exclamation-circle text-danger mb-2 "> </ i >
127+ < div >
128+ < span id ="openIssuesCount " class ="stat-value "> 2</ span >
129+ < p class ="stat-label mb-0 "> Open Issues</ p >
130+ </ div >
131+ </ div >
132+ </ div >
133+
134+
135+ < div class ="ad-unit ad-apt ">
136+ < script async src ="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7089100907045419 "
137+ crossorigin ="anonymous "> </ script >
138+ <!-- CodehimBlog APT -->
139+ < ins class ="adsbygoogle "
140+ style ="display:block "
141+ data-ad-client ="ca-pub-7089100907045419 "
142+ data-ad-slot ="4990741913 "
143+ data-ad-format ="auto "
144+ data-full-width-responsive ="true "> </ ins >
145+ < script >
146+ ( adsbygoogle = window . adsbygoogle || [ ] ) . push ( { } ) ;
147+ </ script >
148+ </ div >
149+
150+ < div class ="row mb-4 ">
151+ <!-- Tabs (Left) -->
152+ < div class ="col-12 col-md-6 d-flex justify-content-start mb-3 mb-md-0 ">
153+ < ul class ="nav nav-tabs " id ="infoTabs " role ="tablist ">
154+ < li class ="nav-item " role ="presentation ">
155+ < button class ="nav-link active " id ="installation-tab " data-bs-toggle ="tab " data-bs-target ="#installation " type ="button " role ="tab " aria-controls ="installation " aria-selected ="true ">
156+ < i class ="bi bi-file-earmark-text "> </ i > Readme
157+ </ button >
158+ </ li >
159+ < li class ="nav-item " role ="presentation ">
160+ < button class ="nav-link " id ="changelog-tab " data-bs-toggle ="tab " data-bs-target ="#changelog " type ="button " role ="tab " aria-controls ="changelog " aria-selected ="false ">
161+ < i class ="bi bi-journal-text me-2 "> </ i > Changelog
162+ </ button >
163+ </ li >
164+ </ ul >
165+ </ div >
166+
167+ <!-- Action Buttons (Right) -->
168+ < div class ="col-12 col-md-6 d-flex align-items-center justify-content-end ">
169+ < a href ="https://github.com/aishek/jquery-animateNumber/archive/refs/heads/master.zip " class ="btn btn-primary me-2 action-btn " id ="downloadBtn ">
170+ < i class ="bi bi-cloud-download me-2 "> </ i > Download ZIP
171+ </ a >
172+ < a href ="https://github.com/aishek/jquery-animateNumber " target ="_blank " class ="btn btn-outline-secondary action-btn " id ="githubBtn ">
173+ < i class ="bi bi-github me-2 "> </ i > Fork on GitHub
174+ </ a >
175+ </ div >
176+ </ div >
177+ < div class ="tab-content mt-3 " id ="infoTabsContent ">
178+ < div class ="tab-pane fade show active " id ="installation " role ="tabpanel " aria-labelledby ="installation-tab ">
179+ < p > < a href ="https://codeclimate.com/github/aishek/jquery-animateNumber "> < img src ="https://codeclimate.com/github/aishek/jquery-animateNumber.png " alt ="Code Climate " /> </ a > </ p >
180+ < h1 > jquery-animateNumber</ h1 >
181+ < p > < a href ="http://aishek.github.io/jquery-animateNumber/ "> Demo</ a > | < a href ="https://github.com/aishek/jquery-animateNumber/releases/tag/v0.0.14 "> v0.0.14 – Latest Release</ a > </ p >
182+ < p > < a href ="https://github.com/aishek/jquery-animateNumber/blob/master/README.ru.md "> README на русском языке</ a > </ p >
183+ < p > jQuery numbers animation plugin, adds 'number' property and step function to jQuery's animate function properties.</ p >
184+ < p > Requires jQuery 1.7.0 or higher (latest tested with 3.3.1).</ p >
185+ < h2 > Quick example</ h2 >
186+ < pre class ="prettyprint linenums lang-language "> < code > <p>Fun level <span id="fun-level" style="color: red; font-size: 0px;">0 %</span>.</p></ code > </ pre >
187+ < pre class ="prettyprint linenums lang-language "> < code > // animateNumber accepts same arguments, as animate does
188+ // it adds only 'number' and 'numberStep' params
189+ $('#fun-level').animateNumber(
190+ {
191+ number: 100,
192+ color: 'green', // require jquery.color
193+ 'font-size': '50px',
194+
195+ // optional custom step function
196+ // using here to keep '%' sign after number
197+ numberStep: function(now, tween) {
198+ var floored_number = Math.floor(now),
199+ target = $(tween.elem);
200+
201+ target.text(floored_number + ' %');
202+ }
203+ },
204+ {
205+ easing: 'swing',
206+ duration: 1800
207+ }
208+ );</ code > </ pre >
209+ < p > < a href ="http://aishek.github.io/jquery-animateNumber/ "> All examples</ a > </ p >
210+ < h2 > Alternative plugins for same task</ h2 >
211+ < ul >
212+ < li > < a href ="http://plugins.jquery.com/numerator/ "> jQuery Numerator</ a > </ li >
213+ </ ul >
214+ < h2 > Development</ h2 >
215+ < ol >
216+ < li > < code > npm install grunt-cli -g</ code > </ li >
217+ < li > < code > npm install</ code > </ li >
218+ < li > < code > https://github.com/gmarty/grunt-closure-compiler</ code > </ li >
219+ < li > < code > grunt watch</ code > </ li >
220+ </ ol >
221+ < h2 > Note on Patches / Pull Requests</ h2 >
222+ < ul >
223+ < li > Fork the project.</ li >
224+ < li > Make your feature addition or bug fix.</ li >
225+ < li > Send me a pull request. Bonus points for topic branches.</ li >
226+ </ ul >
227+ < h2 > License</ h2 >
228+ < p > It is free software, and may be redistributed under the terms specified in the LICENSE file.</ p >
229+ < h2 > Contributors</ h2 >
230+ < ul >
231+ < li > < a href ="https://github.com/aishek "> Alexandr Borisov</ a > </ li >
232+ < li > < a href ="https://github.com/xdissent "> Greg Thornton</ a > </ li >
233+ < li > < a href ="https://github.com/topik "> Tomáš Opekar</ a > </ li >
234+ </ ul >
235+ </ div >
236+
237+ < div class ="tab-pane fade " id ="changelog " role ="tabpanel " aria-labelledby ="changelog-tab ">
238+ < ul id ="changelogList ">
239+ No changelog available.
240+ </ ul >
241+ </ div >
242+
243+ </ div >
244+
245+ < div class ="tags mb-2 mt-2 ">
246+ < a href ="https://codehimblog.github.io/tag/animations " class ="text-decoration-none ">
247+ < div class ="d-inline-flex align-items-center bg-light border rounded-pill px-3 py-1 me-2 mb-2 ">
248+ < i class ="bi bi-tag-fill me-2 "> </ i >
249+ < span > animations</ span >
250+ </ div >
251+ </ a > < a href ="https://codehimblog.github.io/tag/javascript " class ="text-decoration-none ">
252+ < div class ="d-inline-flex align-items-center bg-light border rounded-pill px-3 py-1 me-2 mb-2 ">
253+ < i class ="bi bi-tag-fill me-2 "> </ i >
254+ < span > javascript</ span >
255+ </ div >
256+ </ a > < a href ="https://codehimblog.github.io/tag/jquery " class ="text-decoration-none ">
257+ < div class ="d-inline-flex align-items-center bg-light border rounded-pill px-3 py-1 me-2 mb-2 ">
258+ < i class ="bi bi-tag-fill me-2 "> </ i >
259+ < span > jquery</ span >
260+ </ div >
261+ </ a > < a href ="https://codehimblog.github.io/tag/jquery-animatenumber " class ="text-decoration-none ">
262+ < div class ="d-inline-flex align-items-center bg-light border rounded-pill px-3 py-1 me-2 mb-2 ">
263+ < i class ="bi bi-tag-fill me-2 "> </ i >
264+ < span > jquery-animatenumber</ span >
265+ </ div >
266+ </ a > < a href ="https://codehimblog.github.io/tag/jquery-plugin " class ="text-decoration-none ">
267+ < div class ="d-inline-flex align-items-center bg-light border rounded-pill px-3 py-1 me-2 mb-2 ">
268+ < i class ="bi bi-tag-fill me-2 "> </ i >
269+ < span > jquery-plugin</ span >
270+ </ div >
271+ </ a >
272+ </ div >
273+
274+ </ article >
275+
276+
277+ </ main >
278+ <!-- Sidebar -->
279+ < aside class ="col-md-4 p-0 ">
280+ < div class ="sidebar ">
281+ <!-- Owner Section -->
282+ < div class ="sidebar-item mb-4 ">
283+ < div class ="ad-unit ">
284+ < script async src ="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7089100907045419 "
285+ crossorigin ="anonymous "> </ script >
286+ <!-- CodehimBlog Sidebar -->
287+ < ins class ="adsbygoogle "
288+ style ="display:block "
289+ data-ad-client ="ca-pub-7089100907045419 "
290+ data-ad-slot ="8929986923 "
291+ data-ad-format ="auto "
292+ data-full-width-responsive ="true "> </ ins >
293+ < script >
294+ ( adsbygoogle = window . adsbygoogle || [ ] ) . push ( { } ) ;
295+ </ script >
296+ </ div >
297+ < div class ="d-flex align-items-center ">
298+ < img src ="https://avatars.githubusercontent.com/u/151224?v=4 " alt ="Owner Avatar " class ="rounded-circle me-2 owner-avatar ">
299+ < a href ="https://github.com/aishek " target ="_blank " id ="ownerName " class ="sidebar-link "> aishek</ a >
300+ </ div >
301+ </ div >
302+
303+ <!-- Metadata Section -->
304+ < div class ="sidebar-item mb-2 ">
305+ < div class ="metadata-item d-flex align-items-center ">
306+ < i class ="bi bi-calendar me-2 "> </ i >
307+ < strong > Created At:</ strong >
308+ < span id ="createdAt " class ="ms-1 "> October 15, 2013</ span >
309+ </ div >
310+ < div class ="metadata-item d-flex align-items-center mt-2 ">
311+ < i class ="bi bi-pencil-square me-2 "> </ i >
312+ < strong > Last Updated:</ strong >
313+ < span id ="updatedAt " class ="ms-1 "> September 4, 2024</ span >
314+ </ div >
315+ < div class ="metadata-item d-flex align-items-center mt-2 ">
316+ < i class ="bi bi-file-earmark-code me-2 "> </ i >
317+ < strong > Language:</ strong >
318+ < span id ="language " class ="ms-1 "> JavaScript</ span >
319+ </ div >
320+
321+ < div class ="metadata-item d-flex align-items-center mt-2 ">
322+ < i class ="bi bi-shield-check "> </ i >
323+ < strong > License:</ strong >
324+ < span id ="license " class ="ms-1 "> MIT License</ span >
325+ </ div >
326+ < a href ="http://aishek.github.io/jquery-animateNumber " target ="_blank " class ="btn btn-outline-dark btn-sm " id ="homepageBtn ">
327+ < i class ="bi bi-house-door me-2 "> </ i > Visit Homepage
328+ </ a >
329+
330+ </ div >
331+
332+ < div class ="sidebar-item mb-2 ">
333+ < h5 class ="sidebar-title "> Dependencies</ h5 > < ul class ="dependencies-list "> < li > jquery (>= 1.7.0)</ li > </ ul > < h5 class ="sidebar-title "> Development Dependencies</ h5 > < ul class ="dependencies-list "> < li > grunt (~0.4.1)</ li > < li > grunt-contrib-watch (~0.5.3)</ li > < li > grunt-closure-compiler (~0.0.21)</ li > </ ul >
334+ </ div >
335+
336+ < div class ="sidebar-item ">
337+ < h5 class ="sidebar-title "> Contributors</ h5 >
338+ < ul class ="p-0 " id ="contributorsList ">
339+ < ul class ="list-group list-group-flush " id ="contributorsList "> < li class ="list-group-item d-flex align-items-center contributor-item "> < img src ="https://avatars.githubusercontent.com/u/151224?v=4 " alt ="aishek " class ="rounded-circle me-3 " style ="width: 40px; height: 40px; "> < div > < a href ="https://github.com/aishek " target ="_blank " class ="text-decoration-none fw-bold "> aishek</ a > < p class ="mb-0 text-muted small "> 60 contributions</ p > </ div > </ li > < li class ="list-group-item d-flex align-items-center contributor-item "> < img src ="https://avatars.githubusercontent.com/u/1786677?v=4 " alt ="nogorilla " class ="rounded-circle me-3 " style ="width: 40px; height: 40px; "> < div > < a href ="https://github.com/nogorilla " target ="_blank " class ="text-decoration-none fw-bold "> nogorilla</ a > < p class ="mb-0 text-muted small "> 4 contributions</ p > </ div > </ li > < li class ="list-group-item d-flex align-items-center contributor-item "> < img src ="https://avatars.githubusercontent.com/u/99367?v=4 " alt ="xdissent " class ="rounded-circle me-3 " style ="width: 40px; height: 40px; "> < div > < a href ="https://github.com/xdissent " target ="_blank " class ="text-decoration-none fw-bold "> xdissent</ a > < p class ="mb-0 text-muted small "> 1 contributions</ p > </ div > </ li > < li class ="list-group-item d-flex align-items-center contributor-item "> < img src ="https://avatars.githubusercontent.com/u/1847066?v=4 " alt ="sunyatasattva " class ="rounded-circle me-3 " style ="width: 40px; height: 40px; "> < div > < a href ="https://github.com/sunyatasattva " target ="_blank " class ="text-decoration-none fw-bold "> sunyatasattva</ a > < p class ="mb-0 text-muted small "> 1 contributions</ p > </ div > </ li > < li class ="list-group-item d-flex align-items-center contributor-item "> < img src ="https://avatars.githubusercontent.com/u/3578443?v=4 " alt ="topik " class ="rounded-circle me-3 " style ="width: 40px; height: 40px; "> < div > < a href ="https://github.com/topik " target ="_blank " class ="text-decoration-none fw-bold "> topik</ a > < p class ="mb-0 text-muted small "> 1 contributions</ p > </ div > </ li > </ ul >
340+ </ ul >
341+
342+ </ div >
343+
344+ < div class ="ad-unit ">
345+ < script async src ="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7089100907045419 "
346+ crossorigin ="anonymous "> </ script >
347+ <!-- CodehimBlog Skyscrapper -->
348+ < ins class ="adsbygoogle "
349+ style ="display:block "
350+ data-ad-client ="ca-pub-7089100907045419 "
351+ data-ad-slot ="7469565592 "
352+ data-ad-format ="auto "
353+ data-full-width-responsive ="true "> </ ins >
354+ < script >
355+ ( adsbygoogle = window . adsbygoogle || [ ] ) . push ( { } ) ;
356+ </ script >
357+ </ div >
358+
359+ </ div >
360+ </ aside >
361+ </ div >
362+ </ div >
363+ <!-- Footer -->
364+ < footer class ="bg-dark text-white text-center py-3 page-footer ">
365+ < div class ="container ">
366+ < p class ="mb-2 "> © 2024 CodehimBlog - Powered by GitHub</ p >
367+ < nav >
368+ < ul class ="list-inline mb-0 ">
369+ < li class ="list-inline-item ">
370+ < a href ="/privacy-policy.html " class ="footer-link "> Privacy Policy</ a >
371+ </ li >
372+ < li class ="list-inline-item ">
373+ < span class ="text-white "> |</ span >
374+ </ li >
375+ < li class ="list-inline-item ">
376+ < a href ="/terms-and-conditions.html " class ="footer-link "> Terms and Conditions</ a >
377+ </ li >
378+ </ ul >
379+ </ nav >
380+ </ div >
381+ </ footer >
382+ <!-- Bootstrap Bundle JS -->
383+ < script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js "> </ script >
384+ < script src ="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js "> </ script >
385+ < script src ="/js/script.js "> </ script >
386+ <!-- Google tag (gtag.js) -->
387+ < script async src ="https://www.googletagmanager.com/gtag/js?id=G-FG2ZX76XGT "> </ script >
388+ < script >
389+ window . dataLayer = window . dataLayer || [ ] ;
390+ function gtag ( ) { dataLayer . push ( arguments ) ; }
391+ gtag ( 'js' , new Date ( ) ) ;
392+
393+ gtag ( 'config' , 'G-FG2ZX76XGT' ) ;
394+ </ script >
395+ </ body >
396+ </ html >
0 commit comments