Chart

by kthornbloom

HTML

<div class="wrap">
    <div class="detail">
        <div class="chart-bg-fill"></div>
        <div class="chart">
            <div class="chart-fill">
                <div></div>
            </div>
            <div class="chart-center">
                <div class="num">100</div>
            </div>
            <div class="chart-splitter"></div>
        </div>
    </div>
</div>

<div class="wrap">
    <div class="detail">
        <div class="chart-bg-fill"></div>
        <div class="chart">
            <div class="chart-fill">
                <div></div>
            </div>
            <div class="chart-center">
                <div class="num">210</div>
            </div>
            <div class="chart-splitter"></div>
        </div>
    </div>
</div>

CSS

body {
    background:#3799AE;
}
.wrap {
    width:50%;
    float:left;
    text-align:center;
    position:relative;
}
.detail {
    line-height:0;
    
    padding:0 14px;
    box-sizing:border-box;
}
.detail:after {
    content:'';
    width:15px;
    height:175px;
    position:absolute;
    right:5px;
    top:0;
    background-image: repeating-linear-gradient(0deg,transparent,transparent 4px, rgba(255,255,255,.2) 4px,rgba(255,255,255,.2) 5px);
    background-size: 5px 5px;
}
.detail:before {
    content:'';
    width:15px;
    height:175px;
    position:absolute;
    left:5px;
    top:0;
    background-image: repeating-linear-gradient(0deg,transparent,transparent 4px, rgba(255,255,255,.2) 4px,rgba(255,255,255,.2) 5px);
    background-size: 5px 5px;
}

.chart {
    width:175px;
    height:175px;
    position:relative;
    display:inline-block;
    line-height:0;
}
.chart-center {
    background: #3799AE;
    width: 138px;
    height: 138px;
    border-radius: 75px;
    position: absolute;
    top: 18px;
    left: 18px;
    line-height:138px;
    color:#fff;
    font-family:sans-serif;
    font-size:28px;
}
.chart-bg-fill {
    position:absolute;
    left: 10px;
    right: 10px;
    bottom:30px;
    background:linear-gradient(to right, rgba(255,255,255,.15) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(255,255,255,.15) 100%);
    height:1px;
}
.chart-bg-fill:before {
    content:'';
    width:7px;
    height:7px;
    border-radius:4px;
    background:#fff;
    position:absolute;
    top:-3px;
    left:0;
}
.chart-bg-fill:after {
    content:'';
    width:7px;
    height:7px;
    border-radius:4px;
    background:#fff;
    position:absolute;
    top:-3px;
    right:0;
}
.chart-fill {
    width:175px;
    height:175px;
    background:rgba(0, 0, 0, .3);
    border-radius:100px;
    overflow:hidden;
    position:relative;
}
.chart-fill div {
    height:30px;
    width:100%;
    background:#fff;
    position:absolute;
    bottom:0;
   ...

JavaScript

$('.detail').each(function () {
    var max = 300,
        num = $('.num', this).html(),
        num = parseInt(num),
        percent = (num/max) * 100;
    
    $('.num', this).prop('Counter', 0).animate({
        Counter: $(this).text()
    }, {
        duration: 1000,
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
    
    $('.chart-bg-fill', this).animate({
        'bottom':percent+'%'
    }, 2000);
    $('.chart-fill div', this).animate({
        'height':percent+'%'
    }, 2000);
        

});