CSS horizontal Graph

Display simple graphs with CSS

by Ali Khaled

HTML

<script src="https://fonts.googleapis.com/css?family=Roboto:400,700"></script>


<h2>Photoshop</h2>
<div class="bar">
  <div class="bar-inner bar-90" data-percent="90%"></div>
</div>

<h2>Illustrator</h2>
<div class="bar">
  <div class="bar-inner bar-80" data-percent="80%"></div>
</div>

<h2>HTML / CSS</h2>
<div class="bar">
  <div class="bar-inner bar-90" data-percent="95%"></div>
</div>

<h2>PHP / MYSQL</h2>
<div class="bar">
  <div class="bar-inner bar-80" data-percent="70%"></div>
</div>

CSS

body {
  font-family: 'Roboto', sans-serif;
  padding: 30px;
  -webkit-font-smoothing: antialiased;
}
.bar {
  background-color: #f2f2f1;
  width: 100%;
  height: 30px;
  margin-bottom: 40px;
  }
 
 h2 {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 22px;
  color: #566366;
  margin: 0 0 20px 0;
}

.bar-inner {
  background-color: #2ecc71;
  width: 0%;
  height: 100%;
  position: relative;
  transition: width 3000ms linear;
}

.bar-inner:after {
  position: absolute;
  right: 2.5%;
  content: attr(data-percent);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
}

JavaScript

(function(document) {
  var _bars = [].slice.call(document.querySelectorAll('.bar-inner'));
  _bars.map(function(bar, index) {
    setTimeout(function() {
    	bar.style.width = bar.dataset.percent;
    }, index * 1000);
    
  });
})(document)