<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- include the following line in head -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<br />
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="tile-progress tile-primary">
<div class="tile-header">
<h2>Visitors</h2>
<h1>13.4<sub>K / day</sub></h1>
</div>
<div class="tile-progressbar" >
<span data-value="50%"></span>
</div>
<div class="tile-footer">
<i class="fa fa-fw fa-arrow-circle-up"></i> +0.1<sub>K</sub>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="tile-progress tile-red">
<div class="tile-header">
<h2>Pageviews</h2>
<h1>68<sub>K / day</sub></h1>
</div>
<div class="tile-progressbar">
<span data-value="23.2%"></span>
</div>
<div class="tile-footer">
<i class="fa fa-fw fa-arrow-circle-down"></i> -1.2<sub>%</sub>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="tile-progress tile-blue">
<div class="tile-header">
<h2>Osers online</h2>
<h1>86<sub><i class="fa fa-users"></i> 60"</sub></h1>
</div>
<div class="tile-progressbar">
<span data-value="81.2%"></span>
</div>
<div class="tile-footer">
<i class="fa fa-fw fa-arrow-circle-up"></i> +13<sub></sub>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="tile-progress tile-aqua">
<div class="tile-header">
<h2>Downloads</h2>
<h1>8<sub>/ hour</sub></h1>
</div>
<div class="tile-progressbar">
<span data-value="23.2%"></span>
</div>
<div class="tile-footer">
<i class="fa fa-fw fa-arrow-circle-down"></i> -3<sub></sub>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="tile-progress tile-green">
<div class="tile-header">
<h2>Pageviews</h2>
<h1>68<sub>K / day</sub></h1>
</div>
<div class="tile-progressbar">
<span data-value="23.2%"></span>
</div>
<div class="tile-footer">
<i class="fa fa-fw fa-arrow-circle-down"></i> -1.2<sub>%</sub>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="tile-progress tile-cyan">
<div class="tile-header">
<h2>Pageviews</h2>
<h1>68<sub>K / day</sub></h1>
</div>
<div class="tile-progressbar">
<span data-value="10%"></span>
</div>
<div class="tile-footer">
<i class="fa fa-fw fa-arrow-circle-down"></i> -1.2<sub>%</sub>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="tile-progress tile-purple">
<div class="tile-header">
<h2>Pageviews</h2>
<h1>68<sub>K / day</sub></h1>
</div>
<div class="tile-progressbar">
<span data-value="10%"></span>
</div>
<div class="tile-footer">
<i class="fa fa-fw fa-arrow-circle-down"></i> -1.2<sub>%</sub>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="tile-progress tile-pink">
<div class="tile-header">
<h2>Pageviews</h2>
<h1>68<sub>K / day</sub></h1>
</div>
<div class="tile-progressbar">
<span data-value="10%"></span>
</div>
<div class="tile-footer">
<i class="fa fa-fw fa-arrow-circle-down"></i> -1.2<sub>%</sub>
</div>
</div>
</div>
</div>
</div>
.tile-progress {
color: #fff;
background-color: blacK;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
margin-bottom: 1em;
}
.tile-progress .tile-header {
font-size: 2em;
text-align: center;
line-height: 1em;
padding: 0.5em;
margin: 0;
}
.tile-progress .tile-header h2 {
text-align: left;
font-size: 0.8em;
margin: 0;
}
.tile-progress sub {
font-size: 0.4em;
padding-left: 0.5em;
}
.tile-progress .tile-footer {
font-size: 1.2em;
background-color: rgba(0,0,0,0.15);
}
.tile-progress .tile-progressbar {
min-height: 2px;
height: 2px;
background-color: rgba(0,0,0,0.3);
}
.tile-progress .tile-progressbar span {
display: block;
background: greenyellow;
width: 0;
height: 100%;
-webkit-transition: all 1.5s cubic-bezier(0.230,1.000,0.320,1.000);
-moz-transition: all 1.5s cubic-bezier(0.230,1.000,0.320,1.000);
-o-transition: all 1.5s cubic-bezier(0.230,1.000,0.320,1.000);
transition: all 1.5s cubic-bezier(0.230,1.000,0.320,1.000);
}
.tile-progress .tile-footer {
padding: 1em;
text-align: left;
-webkit-border-radius: 0 0 3px 3px;
-webkit-background-clip: padding-box;
-moz-border-radius: 0 0 3px 3px;
-moz-background-clip: padding;
background-clip: padding-box;
border-radius: 0 0 3px 3px;
}
.tile-progress.tile-red {
background-color: #f56954;
color: #fff;
}
.tile-progress {
background-color: #303641;
color: #fff;
}
.tile-progress.tile-blue {
background-color: #0073b7;
color: #fff;
}
.tile-progress.tile-aqua {
background-color: #00c0ef;
color: #fff;
}
.tile-progress.tile-green {
background-color: #00a65a;
color: #fff;
}
.tile-progress.tile-cyan {
background-color: #00b29e;
color: #fff;
}
.tile-progress.tile-purple {
background-color: #ba79cb;
color: #fff;
}
.tile-progress.tile-pink {
background-color: #ec3b83;
color: #fff;
}
$(document).ready(function(){
$('.tile-progressbar span').each(function(){
$(this).css('width',$(this).data('value'));
$(this).html('');
});
});
