Flat Skills charts with "Easy Pie chart"

Flat-Skills-charts-with-"Easy-Pie-chart".markdown

Flat Skills charts with "Easy Pie chart"

A Pen by Nazmul Hasan Rupok on CodePen.

License.

index.html

<div class="container">
  <h1>Flat Skills charts with "Easy Pie chart"</h1>
  <div class="chart" data-percent="80">HTML5</div>
  <div class="chart" data-percent="30">CSS3</div>
  <div class="chart" data-percent="60">SASS</div>
  <div class="chart" data-percent="50">jQuery</div>
  <div class="chart" data-percent="11">AngularJS</div>
    <div class="chart" data-percent="20">BackboneJS</div>
  <div class="chart" data-percent="30">NodeJS</div>
  <div class="chart" data-percent="60">PHP</div>
</div>

<div class="footer">
<a href="http://www.rupok.me"> Created by Nazmul H. Rupok </a>
<div>
  

script.js

$(function() {
  $('.chart').easyPieChart({
    scaleColor: "#ecf0f1",
    lineWidth: 20,
    lineCap: 'butt',
    barColor: '#1abc9c',
    trackColor:	"#ecf0f1",
    size: 160,
    animate: 500
  });
});

style.css

body 
{
color: #16a085;
font-family: 'Source Sans Pro',sans-serif;;
}

.container {
  padding: 10px 50px;
  text-align: center;
}

.chart {
  position: relative;
  display: inline-block;
  margin: 20px 10px;
  color: #999;
  font-size: 14px;
  text-align: center;
}
.chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.footer {
  background: #f3f3f3;
  width: 100%;
  padding: 10px;
  text-align: center;
  position: fixed;
  bottom: 0;
  z-index: 99;
}

.footer a {
  color: #2c3e50;
}