Simple Progress Bar with CSS/Javascript

Display simple progress bar or horizontal graphs with percentage.

HTML

<!--
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
-->
<h2>Photoshop</h2>
<div class="bar">
  <div class="bar-inner" data-percent="16%"></div>
</div>

CSS

/*
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
*/
.bar {
  width: 100%;
  height: 30px;
  margin-bottom: 15px;
	background-color: #FFF;
  }
.bar-inner {
  width: 0%;
  height: 100%;
  position: relative;
	background-color: #2ecc71;
  transition: width 3000ms linear;
}
.bar-inner:after {
	color: #fff;
	line-height: 30px;
  content: attr(data-percent);
	position: absolute;
  right: 2.5%;
}

JavaScript

/*
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
*/
(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)
/* FOR jQuery METHOD: You need include jQuery library (any version) */
/*
(function(jQuery) {
  var bars = [].slice.call($('.bar-inner'));
  bars.map(function(bar, index) {
	//console.log($(bar).attr("data-percent"));
    setTimeout(function() {
    	bar.style.width = $(bar).data("percent");
    }, index * 1000);
  });
})(jQuery)
*/