Counter

Lightweight JavaScript plugin that can be used to quickly create animations that display numerical data in a more interesting way

Default

<div class="block-counter block-counter-default wow fadeIn">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-1g"></div>
      <div class="block-counter-text text-uppercase h4">happy clients</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-2g"></div>
      <div class="block-counter-text text-uppercase h4">datacenters</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-3g"></div>
      <div class="block-counter-text text-uppercase h4">cups of coffee</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-4g"></div>
      <div class="block-counter-text text-uppercase h4">e-mails sent</div>
    </div>
  </div>
</div>
happy clients
datacenters
cups of coffee
e-mails sent

Colored

<div class="block-counter block-counter-colored wow fadeIn">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-1h"></div>
      <div class="block-counter-text text-uppercase h4">happy clients</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-2h"></div>
      <div class="block-counter-text text-uppercase h4">datacenters</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-3h"></div>
      <div class="block-counter-text text-uppercase h4">cups of coffee</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-4h"></div>
      <div class="block-counter-text text-uppercase h4">e-mails sent</div>
    </div>
  </div>
</div>
happy clients
datacenters
cups of coffee
e-mails sent

Icons

<div class="block-counter block-counter-icons wow fadeIn">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-icon">
        <i class="fa fa-users"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-1k"></div>
      <div class="block-counter-text text-uppercase h4">happy clients</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-icon">
        <i class="fa fa-database"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-2k"></div>
      <div class="block-counter-text text-uppercase h4">datacenters</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-icon">
        <i class="fa fa-coffee"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-3k"></div>
      <div class="block-counter-text text-uppercase h4">cups of coffee</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-icon">
        <i class="fa fa-envelope-o"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-4k"></div>
      <div class="block-counter-text text-uppercase h4">e-mails sent</div>
    </div>
  </div>
</div>
happy clients
datacenters
cups of coffee
e-mails sent

Icon Box 1

<div class="block-counter block-counter-icon-box wow fadeIn">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-3">
        <div class="icon-box-counter icon-anim-1a-black icon-box-border-black">
          <div class="icon-wrapper">
            <i class="fa fa-users icon circle-block"></i>
          </div>
          <div class="icon-box-content">
            <div class="block-counter-itself" id="block-counter-1i"></div>
            <p class="m-t">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="icon-box-counter icon-anim-1a-black icon-box-border-black">
          <div class="icon-wrapper">
            <i class="fa fa-database icon circle-block"></i>
          </div>
          <div class="icon-box-content">
            <div class="block-counter-itself" id="block-counter-2i"></div>
            <p class="m-t">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="icon-box-counter icon-anim-1a-black icon-box-border-black">
          <div class="icon-wrapper">
            <i class="fa fa-coffee icon circle-block"></i>
          </div>
          <div class="icon-box-content">
            <div class="block-counter-itself" id="block-counter-3i"></div>
            <p class="m-t">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="icon-box-counter icon-anim-1a-black icon-box-border-black">
          <div class="icon-wrapper">
            <i class="fa fa-envelope-o icon circle-block"></i>
          </div>
          <div class="icon-box-content">
            <div class="block-counter-itself" id="block-counter-4i"></div>
            <p class="m-t">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

Icon Box 2

<div class="block-counter block-counter-icon-box-2 icon-box-centered wow fadeIn">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-3">
        <div class="icon-box-counter-center icon-anim-1a-black icon-box-border-black">
          <div class="icon-wrapper">
            <i class="fa fa-users icon circle-block"></i>
          </div>
          <div class="icon-box-content">
            <div class="block-counter-itself" id="block-counter-1j"></div>
            <p class="m-t">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="icon-box-counter-center icon-anim-1a-black icon-box-border-black">
          <div class="icon-wrapper">
            <i class="fa fa-database icon circle-block"></i>
          </div>
          <div class="icon-box-content">
            <div class="block-counter-itself" id="block-counter-2j"></div>
            <p class="m-t">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="icon-box-counter-center icon-anim-1a-black icon-box-border-black">
          <div class="icon-wrapper">
            <i class="fa fa-coffee icon circle-block"></i>
          </div>
          <div class="icon-box-content">
            <div class="block-counter-itself" id="block-counter-3j"></div>
            <p class="m-t">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="icon-box-counter-center icon-anim-1a-black icon-box-border-black">
          <div class="icon-wrapper">
            <i class="fa fa-envelope-o icon circle-block"></i>
          </div>
          <div class="icon-box-content">
            <div class="block-counter-itself" id="block-counter-4j"></div>
            <p class="m-t">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

Small

<div class="block-counter block-counter-small block-counter-small-init wow fadeIn">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-md">
      <div class="block-counter-itself" id="block-counter-1l"></div>
      <div class="block-counter-text text-uppercase h5">happy clients</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-md">
      <div class="block-counter-itself" id="block-counter-2l"></div>
      <div class="block-counter-text text-uppercase h5">datacenters</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-md">
      <div class="block-counter-itself" id="block-counter-3l"></div>
      <div class="block-counter-text text-uppercase h5">cups of coffee</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-md">
      <div class="block-counter-itself" id="block-counter-4l"></div>
      <div class="block-counter-text text-uppercase h5">e-mails sent</div>
    </div>
  </div>
</div>
happy clients
datacenters
cups of coffee
e-mails sent

Large

<div class="block-counter block-counter-large wow fadeIn">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-1m"></div>
      <div class="block-counter-text text-uppercase h4">happy clients</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-2m"></div>
      <div class="block-counter-text text-uppercase h4">datacenters</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-3m"></div>
      <div class="block-counter-text text-uppercase h4">cups of coffee</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-4m"></div>
      <div class="block-counter-text text-uppercase h4">e-mails sent</div>
    </div>
  </div>
</div>
happy clients
datacenters
cups of coffee
e-mails sent

Inline

<div class="block-counter block-counter-inline wow fadeIn">

  <h5 class="average-heading"><i class="fa fa-globe"></i> <span id="block-counter-1n"></span> community members at the moment</h5>
  <br>
  <p class="lead-alt"><i class="fa fa-inbox"></i> New <span id="block-counter-2n"></span> messages in your inbox</p>
  <br>
  <p class="h3 slab"><i class="fa fa-user"></i> <span id="block-counter-3n"></span> users are online</p>
  <br>
  <div class="alert alert-success" role="alert">
    We've already served <i class="fa fa-smile-o"></i> <b><span id="block-counter-4n"></span></b> happy clients. Be the next!
  </div>

</div>
community members at the moment

New messages in your inbox


users are online


Filled

Default

<div class="block-counter block-counter-filled block-counter-filled-default wow fadeIn">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 text-center">
      <div class="block-counter-icon">
        <i class="fa fa-users"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-1a"></div>
      <div class="block-counter-text text-uppercase h4">happy clients</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center">
      <div class="block-counter-icon">
        <i class="fa fa-database"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-2a"></div>
      <div class="block-counter-text text-uppercase h4">datacenters</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center">
      <div class="block-counter-icon">
        <i class="fa fa-coffee"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-3a"></div>
      <div class="block-counter-text text-uppercase h4">cups of coffee</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center">
      <div class="block-counter-icon">
        <i class="fa fa-envelope-o"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-4a"></div>
      <div class="block-counter-text text-uppercase h4">e-mails sent</div>
    </div>
  </div>
</div>
happy clients
datacenters
cups of coffee
e-mails sent

Border

<div class="block-counter block-counter-filled block-counter-filled-border wow fadeIn">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 text-center">
      <div class="block-counter-icon">
        <i class="fa fa-users"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-1b"></div>
      <div class="block-counter-text text-uppercase h4">happy clients</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center">
      <div class="block-counter-icon">
        <i class="fa fa-database"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-2b"></div>
      <div class="block-counter-text text-uppercase h4">datacenters</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center">
      <div class="block-counter-icon">
        <i class="fa fa-coffee"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-3b"></div>
      <div class="block-counter-text text-uppercase h4">cups of coffee</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center">
      <div class="block-counter-icon">
        <i class="fa fa-envelope-o"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-4b"></div>
      <div class="block-counter-text text-uppercase h4">e-mails sent</div>
    </div>
  </div>
</div>
happy clients
datacenters
cups of coffee
e-mails sent

Container

<div class="block-counter block-counter-filled block-counter-filled-container wow fadeIn">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-3 text-center">
        <div class="block-counter-icon">
          <i class="fa fa-users"></i>
        </div>
        <div class="block-counter-itself" id="block-counter-1c"></div>
        <div class="block-counter-text text-uppercase h4">happy clients</div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 text-center">
        <div class="block-counter-icon">
          <i class="fa fa-database"></i>
        </div>
        <div class="block-counter-itself" id="block-counter-2c"></div>
        <div class="block-counter-text text-uppercase h4">datacenters</div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 text-center">
        <div class="block-counter-icon">
          <i class="fa fa-coffee"></i>
        </div>
        <div class="block-counter-itself" id="block-counter-3c"></div>
        <div class="block-counter-text text-uppercase h4">cups of coffee</div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 text-center">
        <div class="block-counter-icon">
          <i class="fa fa-envelope-o"></i>
        </div>
        <div class="block-counter-itself" id="block-counter-4c"></div>
        <div class="block-counter-text text-uppercase h4">e-mails sent</div>
      </div>
    </div>
  </div>
</div>
happy clients
datacenters
cups of coffee
e-mails sent

Single

<div class="block-counter block-counter-filled block-counter-filled-single wow fadeIn">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 text-center">
        <div class="block-counter-icon">
          <i class="fa fa-users"></i>
        </div>
        <div class="block-counter-itself" id="block-counter-1e"></div>
        <div class="block-counter-text text-uppercase h4">happy clients</div>
      </div>
    </div>
  </div>
</div>
happy clients

With image

Multiple Images

<div class="block-counter block-counter-img block-counter-images wow fadeIn">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 text-center">
      <div class="block-counter-icon">
        <i class="fa fa-users"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-1d"></div>
      <div class="block-counter-text text-uppercase h3">happy clients</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center">
      <div class="block-counter-icon">
        <i class="fa fa-database"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-2d"></div>
      <div class="block-counter-text text-uppercase h3">datacenters</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center">
      <div class="block-counter-icon">
        <i class="fa fa-coffee"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-3d"></div>
      <div class="block-counter-text text-uppercase h3">cups of coffee</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center">
      <div class="block-counter-icon">
        <i class="fa fa-envelope-o"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-4d"></div>
      <div class="block-counter-text text-uppercase h3">e-mails sent</div>
    </div>
  </div>
</div>
happy clients
datacenters
cups of coffee
e-mails sent

Single Image Parallax

<div class="block-counter block-counter-img block-counter-single-img wow fadeIn bg-half-black" data-parallax="scroll" data-speed="0.2">
  <div class="row">
    <div class="col-xs-12 text-center">
      <div class="block-counter-icon">
        <i class="fa fa-users"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-1f"></div>
      <div class="block-counter-text text-uppercase h3">happy clients</div>
    </div>
  </div>
</div>
happy clients