3D Progress Bar (not finished)

HTML
<div class="progress-bar"> <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>
CSS
html, body { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; background: #333; margin: 0 } .progress-bar { font-size: 1em; perspective: 1000px; perspective-origin: 50% 50%; backface-visibility: visible; width: 500px; } .bar { font-size: 1em; position: relative; height: 10em; transition: all 0.3s ease-in-out; transform: rotateX(60deg) rotateY(0deg); 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 { transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em); } .bar .side-b { transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em); position: absolute; right: 0; } .bar .side-0 { transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em); } .bar .side-1 { transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em); } .bar .top { 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 { 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: 5s; } @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; }
JAVASCRIPT
Expand for more options Login