"cir - percent"
Bootstrap 3.3.0 Snippet by trappedinlimbo

Post to Facebook Tweet this

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
<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 ---------->
<div class="progressDiv">
<div class="statChartHolder">
<div class="progress-pie-chart" data-percent="43"><!--Pie Chart -->
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper">
<span>%</span>
</div>
</div>
</div><!--End Chart -->
</div>
<div class="statRightHolder">
<ul>
<li> <h3 class="blue">19.4k</h3> <span>Interactions</span></li>
<li> <h3 class="purple">1.8k</h3> <span>Posts</span></li>
</ul>
<ul class="statsLeft">
<li><h3 class="yellow">22%</h3> <span>Comments</span></li>
<li><h3 class="red">37%</h3> <span>Cheers</span></li>
</ul>
<ul class="statsRight">
<li><h3>18%</h3> <span>Tasks</span></li>
<li><h3>23%</h3> <span>Goals</span></li>
</ul>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
padding: 0;
margin: 0;
height: 100%;
list-style: none;
overflow: hidden;
font-family: 'Lato', Calibri, Arial, sans-serif;
}
.progressDiv {
width: 84%;
background: #fcfcfc;
height: 325px;
border: 1px solid #ccc;
position: relative;
left: 7%;
top: 100px;
display: inline-block;
border-radius: 2px;
box-shadow: 0px 1px 1px 1px #ccc;
}
.statChartHolder {
width: 35%;
height: 90%;
position: relative;
border-right: 1px solid #ccc;
top: 15px;
display: inline-block;
}
.statRightHolder {
display: inline-block;
height: 90%;
width: 64%;
position: relative;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
$(function(){
var $ppc = $('.progress-pie-chart'),
percent = parseInt($ppc.data('percent')),
deg = 360*percent/100;
if (percent > 50) {
$ppc.addClass('gt-50');
}
$('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
$('.ppc-percents span').html(percent+'%');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard Angular

Questions / Comments: