CodePen Embed - Neat value indicators for a Bootstrap dashboard

<div class="bg-light h-100vh position-relative overflow-hidden">

  <div class="p-5 h-100 position-relative z-index-2 overflow-auto  py-3 animated bounceInUp">

    
    <div class="row">
      <h1 class="display-4 p-3">Neat Indicators <span class="text-muted">for a<br> Bootsrap Dashboard</span></h1>
      <!--       Outage warning -->
      <div class="p-2 bg-warning text-black rounded m-3 p-3 shadow-sm text-center position-relative animated flipInX delay-1 overflow-hidden">
        <div class="text-uppercase text-tracked mb-2">Warning</div>
        <i class="decorative-icon fas fa fa-exclamation-circle opacity-25 fa-5x animated infinite pulse slower"></i>
        <pre class="bg-dark text-white rounded p-2"><code>Expected outage<br> in US-EAST-1</code></pre>
      </div>

      <!--       Active users indicator -->
      <div class="p-2 bg-primary text-white rounded m-3 p-3 shadow-lg text-center animated flipInX delay-2">
        <div class="text-uppercase text-tracked opacity-50 mb-2">Right now</div>
        <div class="display-4 text-monospace">90</div>
        <small>active users on site</small>
      </div>

      <!--       Revenue today indicator -->
      <div class="p-2 bg-white rounded p-3 m-3 shadow-sm animated flipInX delay-3">
        <div class="text-uppercase text-tracked text-muted mb-2">
          Revenue today
        </div>
        <div class="badge badge-success text-size-2 text-monospace mx-auto">$98<span class="opacity-50 small">.50</span></div>
        <div class="text-muted small mt-1">
          <span class="text-danger">
      <i class="fas fa fa-long-arrow-alt-down"></i>
      5% 
    </span> vs average
        </div>
      </div>

      <!--       Weekly users indicator -->
      <div class="d-flex flex-column p-3 m-3 bg-white shadow-sm rounded animated flipInX delay-4">
        <div class="text-uppercase text-tracked text-muted mb-2">Weekly Users</div>

        <div class="d-flex justify-content-between">
          <div>
            <span class="text-size-2 text-monospace">321</span>k
          </div>
          <div class="text-success pl-3 pt-1">
            <i class="fas fa fa-long-arrow-alt-up"></i> 
            <span class="text-monospace">11%</span>
            <div class="small text-muted">vs last week</div>
          </div>
        </div>
      </div>

      <!--       Bounce rate indicator -->
      <div class="d-flex flex-column p-3 m-3 bg-white shadow-sm rounded animated flipInX delay-5">
        <div class="text-uppercase text-tracked text-muted mb-2">Bounce rate</div>

        <div class="d-flex align-items-center text-size-3">
          <i class="fas fa fa-door-open opacity-25 mr-2"></i>
          <div class="text-monospace">
            <span class="text-size-2 ">43</span>%
          </div>
          <i class="fas fa fa-arrow-up text-danger ml-2"></i>
        </div>
      </div>

      <!--       Time on site indicator -->
      <div class="d-flex flex-column p-3 m-3 bg-white shadow-sm rounded animated flipInX delay-6">
        <div class="text-uppercase text-tracked text-muted mb-2">avg time on site</div>

        <div class="d-flex align-items-center">
          <i class="fas fa fa-clock opacity-25 mr-2 text-size-3"></i>
          <span class="text-size-2 text-monospace">10</span>
          <span class="text-size-2">m</span>
          <span class="text-size-2 text-monospace">30</span>
          <span class="text-size-2">s</span>
        </div>
        <div class="text-muted small">
          <span class="text-success text-monospace">
            <i class="fas fa fa-long-arrow-alt-up"></i>
            5% 
          </span> vs last week
        </div>
      </div>

      <!--       Sessions by device  -->
      <div class="d-flex flex-column p-3 m-3 bg-white shadow-sm rounded animated flipInX delay-7">
        <div class="text-uppercase text-tracked text-muted mb-2">Sessions by device</div>
        <div class="row text-center">
          <div class="col">
            <i class="fas fa fa-mobile mb-2 text-size-2"></i>
            <div class="text-monospace">54%</div>
          </div>
          <div class="col">
            <i class="fas fa fa-tablet opacity-50 mb-2 text-size-2"></i>
            <div class="text-monospace text-secondary">26%</div>
          </div>
          <div class="col">
            <i class="fas fa fa-laptop opacity-25 mb-2 text-size-2"></i>
            <div class="text-monospace text-secondary">20%</div>
          </div>
        </div>
      </div>

      <!--       Top Referrals -->
      <div class="d-flex flex-column p-3 m-3 bg-white shadow-sm rounded animated flipInX delay-8">
        <div class="text-uppercase text-tracked text-muted mb-2">Top Referrals</div>

        <div>
          <i class="fas fa fa-caret-up text-success"></i>
          <span class="mx-1 text-monospace">62%</span>
<!--           <i class="fab fa-xs fa-google"></i>  -->
          <a href="#">google</a>
        </div>
        <div class="opacity-75">
          <i class="fas fa fa-caret-down text-danger"></i>
          <span class="text-secondary mx-1 text-monospace">25%<span>
<!--           <i class="fab fa-xs fa-y-combinator"></i>  -->
          <a href="#" >news.ycombinator</a>
        </div>
        <div class="opacity-50">
          <i class="text-muted">–</i>
          <span class="text-secondary mx-1 text-monospace">20%</span>
<!--           <i class="fab fa-xs fa-product-hunt"></i>  -->
          <a href="#" >producthunt</a>
        </div>
      </div>

      <!--       Feedback -->
      <div class="d-flex position-relative overflow-hidden flex-column p-3 m-3 bg-white shadow-sm rounded animated flipInX delay-9">
        <div class="text-uppercase text-tracked text-muted mb-2">Latest Feedback</div>
        <i class="fas fa fa-smile opacity-25 fa-5x text-warning decorative-icon"></i>

        <div class="d-flex justify-content-between">
          <div>
            <img class="d-block rounded-circle" width="32" src="https://avatars3.githubusercontent.com/u/2906365?s=460&v=4" />
          </div>
          <div class="pl-3 pt-1">
            Nothing bad to say<br/> at this point 😌
            <a class="d-block mt-1 small opacity-75" href="mailto:hermanstarikov@gmail.com">Write back</a>
          </div>
        </div>
      </div>
          
      <!--       Balance indicator -->
      <div class="p-2 bg-white rounded p-3 m-3 shadow-sm animated flipInX delay-10">
        <div class="text-uppercase text-tracked text-muted mb-2">
          Balance
        </div>
        <div class="text-muted">
          <i class="fas fa fa-long-arrow-alt-up text-success"></i>
          <span class="text-success text-size-2 text-monospace">
            0.02% 
          </span> this month
        </div>
        <span class="small">Stripe:</span>
        <span class="small text-monospace mx-auto">$4,480<span class="opacity-50">.00</span>
        </span>
      </div>
          
      <!--       Health Status indicator -->
      <div class="d-flex flex-column p-3 m-3 bg-white shadow-sm rounded animated flipInX delay-11">
        <div class="text-uppercase text-tracked text-muted mb-2">Health status</div>

        <div class="d-flex justify-content-between align-items-center mb-2">
          
          <div>
            <i class="fas fa-database"></i> Database  
          </div>
          <i class="fas fa-circle fa-xs text-danger"></i>
        </div>
        
        <div class="d-flex justify-content-between align-items-center">
          
          <div>
            <i class="fas fa-server"></i> API  
          </div>
          <i class="fas fa-circle fa-xs text-warning animated infinite flash slower"></i>
        </div>
      </div>
      <!--       end of indicators -->
    </div>

    <div class="small mx-3 my-3 text-muted">
      Made with Bootstrap v4.1.2, Font Awesome v5.3.1 and Animate.css v3.7.0
    </div>
  </div>
  <!--    decoarative tachometers-->
  <i class="position-absolute z-index-1 fas fa-tachometer-alt text-secondary opacity-25 not-animated infinite pulse slower" style="bottom: 0.25em; right: -0.5em; font-size: 20em;"></i>
  <i class="position-absolute fas fa-tachometer-alt text-secondary opacity-25 not-animated infinite pulse slower delay-2s" style="bottom: -0.25em; right: 1em; font-size: 15em;"></i>
</div>

.text-tracked {
  letterspacing: 0.1em;
}

.text-size-2 {
  font-size: 2.25rem;
}
.text-size-3 {
  font-size: 1.5rem;
}

.z-index-1 {
  z-index: 1;
}
.z-index-2 {
  z-index: 2;
}

.decorative-icon {
  position: absolute;
  top: -0.2em;
  right: -0.2em;
}

.h-100vh {
  height: 100vh;
}

.overflow-hidden {
  overflow: hidden;
}
.overflow-auto {
  overflow: auto;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.delay-1 {
  animation-delay: 0.4s;
}
.delay-2 {
  animation-delay: 0.5s;
}
.delay-3 {
  animation-delay: 0.6s;
}
.delay-4 {
  animation-delay: 0.7s;
}
.delay-5 {
  animation-delay: 0.8s;
}
.delay-6 {
  animation-delay: 0.9s;
}
.delay-7 {
  animation-delay: 1s;
}
.delay-8 {
  animation-delay: 1.1s;
}
.delay-9 {
  animation-delay: 1.2s;
}
.delay-10 {
  animation-delay: 1.3s;
}
.delay-11 {
  animation-delay: 1.4s;
}

This Pen is owned by Herman Starikov on CodePen.

See more by @Hermanya on CodePen

External CSS

External JavaScript

This Pen doesn't use any external JavaScript resources.