<section>
  <article>
    <div class="chart">
      <div class="bar bar-30 lime">
        <div class="face top">
          <div class="growing-bar"></div>
        </div>
        <div class="face side-0">
          <div class="growing-bar"></div>
        </div>
        <div class="face floor">
          <div class="growing-bar"></div>
        </div>
        <div class="face side-a"></div>
        <div class="face side-b"></div>
        <div class="face side-1">
          <div class="growing-bar"></div>
        </div>
      </div>
    </div>

  </article>
</section>

html {
  height: 100%
}

body {
  height: 100%;
  text-align: center;
  color: #222;
  background: #333;
  margin: 0
}

section article {
  display: inline-block;
  width: 40%;
  margin-top: 200px;
}

.chart {
  font-size: 1em;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.bar {
  font-size: 1em;
  position: relative;
  height: 10em;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: rotateX(60deg) rotateY(0deg);
  transform: rotateX(60deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.bar .face {
  font-size: 2em;
  position: relative;
  width: 100%;
  height: 2em;
  background-color: rgba(254, 254, 254, 0.3);
}

.bar .face.side-a,
.bar .face.side-b {
  width: 2em;
}

.bar .side-a {
  -webkit-transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em);
  transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em);
}

.bar .side-b {
  -webkit-transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em);
  transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em);
  position: absolute;
  right: 0;
}

.bar .side-0 {
  -webkit-transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em);
  transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em);
}

.bar .side-1 {
  -webkit-transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em);
  transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em);
}

.bar .top {
  -webkit-transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em);
  transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em);
}

.bar .floor {
  box-shadow: 0 0.1em 0.6em rgba(0, 0, 0, 0.3), 0.6em -0.5em 3em rgba(0, 0, 0, 0.3), 1em -1em 8em #fefefe;
}

.growing-bar {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: rgba(118, 201, 0, 0.6);
  height: 2em;
  animation-name: loader;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 3s;
}

@-webkit-keyframes loader {
  0% {   width: 0%;  }
  100% {  width: 100%;  }
}
@-keyframes loader {
  0% {   width: 0%;  }
  100% {  width: 100%;  }
}

.bar.lime .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #76c900;
}

.bar.lime .floor .growing-bar {
  box-shadow: 0em 0em 2em #76c900;
}

//Based on a pen by @rgg