"skills chart"
Bootstrap 3.3.0 Snippet by MikeClark

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
36
37
<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>
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
.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; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit
Responsive Column Chart

Questions / Comments: