CSS Tricks7

3D Progress bar

by Soya Natsuki

HTML

<html>

  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="jquery-2.1.4.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>

  <body>
    <div class="wrapper">
      <div class="progressbar-wrapper">
        <div class="progressbar">
          <div class="side front">
            <div class="bar"></div>
          </div>
          <div class="side back">
            <div class="bar"></div>
          </div>
          <div class="side top">
            <div class="bar"></div>
          </div>
          <div class="side bottom">
            <div class="bar"></div>
          </div>
          <div class="side left"></div>
        </div>
      </div>
    </div>
    <script>
      $('.bar').width('10%');

    </script>
  </body>

</html>

CSS

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}

.wrapper {
  width: 100%;
  top: 50%;
  position: absolute;
  display: block;
}

.progressbar-wrapper {
  width: 300px;
  height: 60px;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.progressbar {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(-30deg);
}

.side {
  width: 100%;
  height: 100%;
  background-color: rgba(254, 254, 254, 0.3);
  top: 0;
  left: 0;
  position: absolute;
}

.bottom {
  box-shadow: 10px 10px 50px 5px rgba(90, 90, 90, 0.7);
  transform: rotateX(90deg);
  transform-origin: bottom;
}

.top {
  transform: translate(0, -100%) rotateX(90deg);
  transform-origin: bottom;
}

.back {
  transform: translateZ(-60px);
}

.left {
  width: 60px;
  transform: rotateY(90deg);
  transform-origin: left;
  background-color: rgba(225, 0, 120, 0.6);
}

.bar {
  height: 100%;
  background-color: rgba(225, 0, 120, 0.6);
  box-shadow: 5px 5px 50px 5px rgba(225, 0, 120, 0.3);
  width: 70%;
}