i want to create a counter up code in which numbers are in i

>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Counter Up Demotitle>
<meta name="description" content="Counter Up - jQuery Plugin Demo">
<meta name="author" content="Benjamin Intal">
<link rel="author" href="https://plus.google.com/113101541449927918834"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<style>
body {
margin: 40px 100px 150px;
}
* {
font-family: 'Open Sans', sans-serif;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
text-align: center;
}
h1, h3 {
font-weight: 600;
text-transform: uppercase;
}
h3 {
margin-bottom: 30px;
color: #999;
}
span {
font-size: 66px;
color: #555;
margin-bottom: 350px;
display: inline-block;
font-weight: 400;
text-align: center;
}
span > span {
margin-bottom: 0;
}
.circle {
background: #2980b9;
width: 200px;
line-height: 200px;
display: inline-block;
color: #fff;
border-radius: 100%;
}
code, code > span {
text-align: left;
display: block;
font-family: Monaco, monospace;
background: #444;
color: #fff;
padding: 20px;
font-size: 14px;
margin-bottom: 100px;
}
code > span {
padding: 0;
margin: 0;
}
@media only screen and (max-width: 1024px) {
span {
font-size: 33px;
margin-bottom: 200px;
}
}
@media only screen and (max-width: 800px) {
div > span {
font-size: 66px;
display: block;
width: 100% !important;
margin-bottom: 100px;
}
span {
font-size: 66px;
}
code {
margin-bottom: 100px;
}
}
style>
<div>
<span class="counter" style="display: inline-block; width: 32%">52,147span>
<span class="counter" style="display: inline-block; width: 32%">1.9583span>
<span class="counter" style="display: inline-block; width: 32%">12345span>
div>
<div>
<span style="display: inline-block; width: 32%"><span>$span><span class="counter">43,753span>span>
<span class="counter" style="display: inline-block; width: 32%">1,734,195.10span>
<span class="counter" style="display: inline-block; width: 32%">849203span>
div>
<div>
<span class="counter" style="display: inline-block; width: 32%">0.8412span>
<span class="counter" style="display: inline-block; width: 32%">958393.10span>
<span class="counter" style="display: inline-block; width: 32%">5,123,348span>
div>
<div>
<span class="counter" style="display: inline-block; width: 32%">52,147span>
<span class="counter" style="display: inline-block; width: 32%">1.9583span>
<span class="counter" style="display: inline-block; width: 32%">12345span>
div>
<div>
<span style="display: inline-block; width: 32%"><span>$span><span class="counter">43,753span>span>
<span class="counter" style="display: inline-block; width: 32%">1,734,195.10span>
<span class="counter" style="display: inline-block; width: 32%">849203span>
div>
<div>
<span class="counter" style="display: inline-block; width: 32%">0.8412span>
<span class="counter" style="display: inline-block; width: 32%">958393.10span>
<span class="counter" style="display: inline-block; width: 32%">5,123,348span>
div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js">script>
body>
html>

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Laxmidhar Sahoo6y ago
1. >
3. <html lang="en">
4. <head>
5. <meta charset="utf-8">
7. <title>Counter Up Demotitle>
8. <meta name="description" content="Counter Up - jQuery Plugin Demo">
9. <meta name="author" content="Benjamin Intal">
10. <link rel="author" href="https://plus.google.com/113101541449927918834"/>
11. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
12. <style>
13. body {
14. margin: 40px 100px 150px;
15. }
16. * {
17. font-family: 'Open Sans', sans-serif;
18. -webkit-transition: all 400ms ease;
19. -moz-transition: all 400ms ease;
20. -o-transition: all 400ms ease;
21. transition: all 400ms ease;
22. text-align: center;
23. }
24. h1, h3 {
25. font-weight: 600;
26. text-transform: uppercase;
27. }
28. h3 {
29. margin-bottom: 30px;
30. color: #999;
31. }
32. span {
33. font-size: 66px;
34. color: #555;
35. margin-bottom: 350px;
36. display: inline-block;
37. font-weight: 400;
38. text-align: center;
39. }
40. span > span {
41. margin-bottom: 0;
42. }
43. .circle {
44. background: #2980b9;
45. width: 200px;
46. line-height: 200px;
47. display: inline-block;
48. color: #fff;
49. border-radius: 100%;
50. }
51. code, code > span {
52. text-align: left;
53. display: block;
54. font-family: Monaco, monospace;
55. background: #444;
56. color: #fff;
57. padding: 20px;
58. font-size: 14px;
59. margin-bottom: 100px;
60. }
61. code > span {
62. padding: 0;
63. margin: 0;
64. }
65. @media only screen and (max-width: 1024px) {
66. span {
67. font-size: 33px;
68. margin-bottom: 200px;
69. }
70. }
71. @media only screen and (max-width: 800px) {
72. div > span {
73. font-size: 66px;
74. display: block;
75. width: 100% !important;
76. margin-bottom: 100px;
77. }
78. span {
79. font-size: 66px;
80. }
81. code {
82. margin-bottom: 100px;
83. }
84. }
85. style>
88. <div>
89. <span class="counter" style="display: inline-block; width: 32%">52,147span>
90. <span class="counter" style="display: inline-block; width: 32%">1.9583span>
91. <span class="counter" style="display: inline-block; width: 32%">12345span>
92. div>
93. <div>
94. <span style="display: inline-block; width: 32%"><span>$span><span class="counter">43,753span>span>
95. <span class="counter" style="display: inline-block; width: 32%">1,734,195.10span>
96. <span class="counter" style="display: inline-block; width: 32%">849203span>
97. div>
98. <div>
99. <span class="counter" style="display: inline-block; width: 32%">0.8412span>
100. <span class="counter" style="display: inline-block; width: 32%">958393.10span>
101. <span class="counter" style="display: inline-block; width: 32%">5,123,348span>
102. div>
103. <div>
104. <span class="counter" style="display: inline-block; width: 32%">52,147span>
105. <span class="counter" style="display: inline-block; width: 32%">1.9583span>
106. <span class="counter" style="display: inline-block; width: 32%">12345span>
107. div>
108. <div>
109. <span style="display: inline-block; width: 32%"><span>$span><span class="counter">43,753span>span>
110. <span class="counter" style="display: inline-block; width: 32%">1,734,195.10span>
111. <span class="counter" style="display: inline-block; width: 32%">849203span>
112. div>
113. <div>
114. <span class="counter" style="display: inline-block; width: 32%">0.8412span>
115. <span class="counter" style="display: inline-block; width: 32%">958393.10span>
116. <span class="counter" style="display: inline-block; width: 32%">5,123,348span>
117. div>
118. <script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js">script>
119. <script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js">script>
120. body>
121. html>
+1