"skills chart"
Bootstrap 3.3.0 Snippet by MikeClark

<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 ----------> <a class="anchor" id="a-competencies"></a> <!-- /.row --> <section class=""> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="sectionTitle">Competencies</div> <div id="skillgraph" class="panel panel-default row"> <div class='panel-title text-Left '></div> <div class='row skill-row'> <span class='skillLabel'>Design Layer</span> <span class='skillData-Wrapper'> <span class='skillData bg-blue text-center' data-percent='50'>Intermediate</span></span> </div> <div class='row skill-row'> <span class='skillLabel'>Front End {View} </span><code>(Skills: HTML, css, sass, blade, jquery, bootstrap, Laravel Blade)</code> <span class='skillData-Wrapper'> <span class='skillData bg-rust' data-percent='60'>Intermediate</span></span> </div> <div class='row skill-row'> <span class='skillLabel'>Middle Layer {Controller}</span><code>(Skills: php, Laravel)</code> <span class='skillData-Wrapper'> <span class='skillData bg-blue' data-percent='80'>Strong</span></span> </div> <div class='row skill-row'> <span class='skillLabel'>Data Layer {Model}</span><code>(Skills: MS SQL, MySQL, Laravel Eloquent)</code> <span class='skillData-Wrapper'> <span class='skillData bg-rust' data-percent='80'>Strong</span></span> </div> </div> </div> </div> </div> <!-- /.container --> </section>
.bg-lightgray, .skillData-Wrapper { background-color: #ddd; } .skillData-Wrapper { width: 100%; } #skillgraphWrapper-break { display: inline-block; position: relative; width: 100%; } #skillgraphWrapper-break:after { margin-left: 85px; content: ''; position: absolute; height: 100%; width: -moz-calc(100% - 85px + 15px); width: -webkit-calc(100% - 85px + 15px); width: calc(100% - 85px + 15px); top: 0; left: 0; background: linear-gradient(to right, #000 2px, transparent 2px); background-size: 10%; background-color: rgba(255, 0, 0, 0.2); } #skillgraph { padding: 1em; } .skill-row-break { border-color: red; border-width: 2px; border-style: solid; } .skill-row { margin: 0 0 20px 0; } .skillLabel { float: left; width: 100%; color: black; } .skillData, .skillData-Wrapper { line-height: 0.1 0.7em; height: 0.1 0.7em; width: .1em; float: left; color: white; text-align: center; } .skillData-Wrapper { width: 100%; } .bg-blue { background-color: #0f434c; } .bg-red { background-color: red; } .bg-rust { background-color: #33a4c9; } /* section classes */ .sectionTitle { padding: 0 0 0px 70px; margin: 50px 0; position: relative; } .sectionTitle:before { background-color: #33a4c9; border-radius: 25px; content: ' '; display: block; height: 50px; left: 0; position: absolute; top: 0px; width: 50px; } .sectionTitle-font, .sectionTitle { font-size: 2.5rem; } section { font-size: 1.8rem; }
function loadSkillgraph() { $(".skillData").each(function(index, element) { // element == this var mydata = $(element).data(); var cnt = 0; //recursive call with a time delay so user can see graph draw. function go() { if (cnt++ < mydata['percent']) { setTimeout(go, 10); } $(element).css('width', cnt + '%'); } go(); }); } loadSkillgraph();

Related: See More


Questions / Comments: