Vertically Simple Progress Bar with CSS/Javascript

Display simple progress bar or vertically graphs with percentage.

HTML

<div class="bar">
  <div class="bar-inner" data-width="90%" data-height="100%"></div>
</div>

CSS

.bar {
  width: 100%;
  height: 90vh;
	background-color: #FFF;
	position: relative;
  }
.bar-inner {
  width: 100%;
  height: 0%;
  position: absolute;bottom:0;
	background-color: #2ecc71;
  transition: all 1000ms linear;
}
.bar-inner:after {
	color: #000;
	line-height: 30px;/* margin-top: -30px; */
  content: attr(data-height);
	text-align: center;display:block
}

JavaScript

(function(document) {
  var bars = [].slice.call(document.querySelectorAll('.bar-inner'));
  bars.map(function(bar, index) {
    setTimeout(function() {
    	//bar.style.width = bar.dataset.width;
			bar.style.height = bar.dataset.height;
    }, 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)
*/