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}