Stats Configuration
Preview
+
Users
$
Revenue
/5
Rating
HTML
1<div class="stats-container">
2
3 <div class="stat">
4 <div class="stat-value"><span class="count">10000</span>+</div>
5 <div class="stat-label">Users</div>
6 </div>
7
8 <div class="stat">
9 <div class="stat-value">$<span class="count">1000000</span></div>
10 <div class="stat-label">Revenue</div>
11 </div>
12
13 <div class="stat">
14 <div class="stat-value"><span class="count">4.8</span>/5</div>
15 <div class="stat-label">Rating</div>
16 </div>
17
18</div>
19<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.8/countUp.min.js"></script>
20<script>
21 document.addEventListener('DOMContentLoaded', function() {
22 const countElements = document.querySelectorAll('.count');
23 countElements.forEach(element => {
24 const countUp = new CountUp(element, 2);
25 if (!countUp.error) {
26 countUp.start();
27 } else {
28 console.error(countUp.error);
29 }
30 });
31 });
32</script>
CSS
1.stats-container {
2 display: flex;
3 flex-direction: row;
4 background-color: #ffffff;
5 color: #000000;
6 font-size: 16px;
7 padding: 20px;
8 justify-content: space-around;
9 align-items: center;
10}
11
12.stat {
13 text-align: center;
14 margin: 10px;
15}
16
17.stat-value {
18 font-size: 1.5em;
19 font-weight: bold;
20}
21
22.stat-label {
23 margin-top: 5px;
24}