Counter
Lightweight JavaScript plugin that can be used to quickly create animations that display numerical data in a more interesting wayDefault
<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>
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>
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>
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
We've already served happy clients. Be the next!
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
⌃
Copyright © 2019 Kate. All Rights Reserved. 7prism
