<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="container"> <div class="row"> <div class="col-md-12"> <div class="text-center text-uppercase"> <h2>My Strengths</h2> </div> <!-- //.text-center --> </div> <!-- //.col-md-12 --> </div> <!-- //.row --> <div class="row"> <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4"> <div class="bar-chart"> <div class="legend"> <div class="item"> <h4>Newbie</h4> </div> <!-- //.item --> <div class="item"> <h4>Decent</h4> </div> <!-- //.item --> <div class="item text-right"> <h4>Good</h4> </div> <!-- //.item --> <div class="item text-right"> <h4>Superhero</h4> </div> <!-- //.item --> </div> <!-- //.legend --> <div class="chart clearfix"> <div class="item"> <div class="bar"> <span class="percent">92%</span> <div class="item-progress" data-percent="92"> <span class="title">Creativity</span> </div> <!-- //.item-progress --> </div> <!-- //.bar --> </div> <!-- //.item --> <div class="item"> <div class="bar"> <span class="percent">71%</span> <div class="item-progress" data-percent="71"> <span class="title">Reliable</span> </div> <!-- //.item-progress --> </div> <!-- //.bar --> </div> <!-- //.item --> <div class="item"> <div class="bar"> <span class="percent">82%</span> <div class="item-progress" data-percent="82"> <span class="title">Comunication</span> </div> <!-- //.item-progress --> </div> <!-- //.bar --> </div> <!-- //.item --> <div class="item"> <div class="bar"> <span class="percent">67%</span> <div class="item-progress" data-percent="67"> <span class="title">Persuasion</span> </div> <!-- //.item-progress --> </div> <!-- //.bar --> </div> <!-- //.item --> </div> <!-- //.chart --> </div> <!-- //.bar-chart --> </div> <!-- //.col-md-4 --> </div> <!-- //.row --> </div> <!-- //.container --> <div class="container" style="margin-top: 30px;"> <div class="text-center"> <br> <a href="http://themes.lucky-roo.com/resume-cv/berg/Demo" target="_blank">Check out my portfolio! :)</a> </div> <!-- //.text-center --> </div> <!-- //.container -->

@import url(https://fonts.googleapis.com/css?family=Roboto); body { background-color: #f2f2f2; color: #000; font-family: 'Roboto', sans-serif; } .bar-chart { position: relative; width: 100%; margin-top: 15px; } .bar-chart > .legend { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; margin-bottom: -45px; border-top: 1px solid #000; } .bar-chart > .legend > .item { position: relative; display: inline-block; float: left; width: 25%; } .bar-chart > .legend > .item:before { display: block; position: absolute; top: 0; left: 0; content: ''; width: 1px; height: 8px; background-color: #000; margin-top: -8px; } .bar-chart > .legend > .item.text-right:before { right: 0; left: auto; } .bar-chart > .legend > .item h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; } .bar-chart > .chart { position: relative; width: 100%; } .bar-chart > .chart > .item { position: relative; width: 100%; height: 40px; margin-bottom: 10px; color: #fff; text-transform: uppercase; } .bar-chart > .chart > .item > .bar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ff4081; z-index: 5; } .bar-chart > .chart > .item > .bar > .percent { display: block; position: absolute; top: 0; right: 0; height: 40px; line-height: 40px; padding-right: 12px; z-index: 15; } .bar-chart > .chart > .item > .bar > .item-progress { position: absolute; top: 0; left: 0; height: 100%; background-color: #3e50b4; z-index: 10; } .bar-chart > .chart > .item > .bar > .item-progress > .title { display: block; position: absolute; height: 40px; line-height: 40px; padding-left: 12px; letter-spacing: 2px; z-index: 15; }

$(document).ready(function(){ barChart(); $(window).resize(function(){ barChart(); }); function barChart(){ $('.bar-chart').find('.item-progress').each(function(){ var itemProgress = $(this), itemProgressWidth = $(this).parent().width() * ($(this).data('percent') / 100); itemProgress.css('width', itemProgressWidth); }); }; });