Usefuldevtools.com
☕
Ad Space - Top Banner (728x90)

Holographic Stats Card

0 viewsadvanced
Background:
Holographic Stats Card
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<div class="holographic-stats">
  <!-- Holographic Background -->
  <div class="holographic-shimmer"></div>
  <div class="rainbow-border"></div>

  <!-- Main Card -->
  <div class="stats-card">
    <!-- Prismatic Overlay -->
    <div class="prismatic-overlay"></div>
    
    <!-- Floating Hologram Lines -->
    <div class="hologram-lines">
      <div class="holo-line holo-line-1"></div>
      <div class="holo-line holo-line-2"></div>
      <div class="holo-line holo-line-3"></div>
    </div>
    
    <!-- Content -->
    <div class="stats-content">
      <!-- Header -->
      <div class="stats-header">
        <div class="header-info">
          <h3 class="stats-title">Analytics</h3>
          <p class="stats-subtitle">Real-time insights</p>
        </div>
        <div class="stats-icon">
          <div class="icon-inner"></div>
        </div>
      </div>
      
      <!-- Main Stats Grid -->
      <div class="stats-grid">
        <!-- Revenue -->
        <div class="stat-card stat-revenue">
          <div class="stat-indicator">
            <div class="stat-dot stat-dot-blue"></div>
            <span class="stat-label">Revenue</span>
          </div>
          <div class="stat-value">$24.8K</div>
          <div class="stat-change">+12.5% this month</div>
        </div>
        
        <!-- Users -->
        <div class="stat-card stat-users">
          <div class="stat-indicator">
            <div class="stat-dot stat-dot-purple"></div>
            <span class="stat-label">Users</span>
          </div>
          <div class="stat-value">1,847</div>
          <div class="stat-change">+8.2% active now</div>
        </div>
        
        <!-- Growth -->
        <div class="stat-card stat-growth">
          <div class="stat-indicator">
            <div class="stat-dot stat-dot-pink"></div>
            <span class="stat-label">Growth</span>
          </div>
          <div class="stat-value">847%</div>
          <div class="stat-change">YoY expansion</div>
        </div>
        
        <!-- Performance -->
        <div class="stat-card stat-performance">
          <div class="stat-indicator">
            <div class="stat-dot stat-dot-emerald"></div>
            <span class="stat-label">Performance</span>
          </div>
          <div class="stat-value">99.9%</div>
          <div class="stat-change">Uptime score</div>
        </div>
      </div>
    </div>

    <!-- Holographic Particles -->
    <div class="holographic-particles">
      <div class="holo-particle particle-1"></div>
      <div class="holo-particle particle-2"></div>
      <div class="holo-particle particle-3"></div>
      <div class="holo-particle particle-4"></div>
    </div>
  </div>
</div>
Was this helpful?