CodePen Embed - Pure CSS 3D Progress Bar

Live

​x
 
<div class="demo-cube perspective percentage">
  <ul class="cube">
    <li class="top"></li>
    <li class="bottom"></li>
    <li class="front"></li>
    <li class="back"></li>
  </ul>
</div>
​
<div class="demo-cube perspective colorful">
  <ul class="cube">
    <li class="top"></li>
    <li class="bottom"></li>
    <li class="front"></li>
    <li class="back"></li>
  </ul>
</div>
​
<div class="demo-cube perspective pink">
  <ul class="cube">
    <li class="top"></li>
    <li class="bottom"></li>
    <li class="front"></li>
    <li class="back"></li>
  </ul>
</div>

Live

xxxxxxxxxx
 
@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
​
body,
html {
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #EEEFED, #F9E3E9);
  display: flex;
  flex-direction: column;
}
​
.perspective {
  transform-style: preserve-3d;
  perspective: 520px;
  transform: rotateX(15deg);
}
​
.demo-cube {
  position: relative;
  width: 100%;
  height: 200px;
  margin: auto;
  margin-top: -30px;
​
  .cube {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 100px;
    transform-style: preserve-3d;
    transform-origin: 50px 50px;
    transform: translate(-50%, -50%) rotateX(-33.5deg);
​
    li {
      position: absolute;
      display: block;
      width: 300px;
      height: 100px;
    }
    .top {
      transform: rotateX(90deg) translateZ(50px);
    }
    .bottom {
      transform: rotateX(-90deg) translateZ(50px);
    }
    .front {
      transform: translateZ(50px);
    }
    .back {
      transform: rotateX(-180deg) translateZ(50px);
    }
  }
}
​
.percentage .cube {
  .top,
  .front,
  .bottom,
  .back {
    background: linear-gradient(90deg, rgba(156, 39, 176, .3), rgba(255, 34, 109, .8) 70%, rgba(255, 255, 255, .6) 70%, rgba(255, 255, 255, .6));
  }
}
​
.colorful {
  animation: hueRotate 10s infinite linear;
  .cube {
    .top,
    .front,
    .bottom,
    .back {
        background: linear-gradient(90deg, rgba(40, 101, 127, .9), rgba(133, 165, 181, .5) 85%, rgba(255, 255, 255, .6) 85%, rgba(255, 255, 255, .6));
    }
  }
}
.pink .cube {
  .top,
  .front,
  .bottom,
  .back {
    background: linear-gradient(90deg, rgba(255, 217, 34, .6), rgba(255, 34, 109, .8) var(--per), rgba(255, 34, 109, .1) var(--per), rgba(255, 34, 109, .1));
    animation: perChange 6s infinite;
  }
}
​
@keyframes perChange {
  0% {
    --per: 0%;
  }
  90%,
  to {
    --per: 80%;
  }
}
​
@keyframes hueRotate {
  0% {
    filter: hue-rotate(0);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
​
​
​
​

This Pen is owned by mafqla on CodePen. It is a fork of this Pen.

See more by @mafqla on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.