Category : Design | Author : Chtiwi Malek | First posted : 8/16/2014 | Updated : 9/26/2017
Tags : 3d, ux, ui, css3, webdesign, design, html5, css, html, progress bar, loading
3D Progress Bar - Pure CSS3

3D Progress Bar - Pure CSS3

Improve user experience on your website and keep your visitors informed about the progress of the task with this eye-catching 3D CSS Progress Bar.

About two year ago I’ve published a tutorial on how to create a pure Css progress bar, for this experiment I’ll extend that same code and create a rotating 3d progress bar.

The final result will look like this :
 
First we will create a 3D rectangular box. I’ve already done a 3D Box Tutorial, check it, it’s the same principle.

Html Markup :

<div class="wrap">
  <div class="cube">
    <div class="front">
      <div class="progress">Loading ...</div>
    </div>
    <div class="back">
      <div class="progress">Loading ...</div>
    </div>
    <div class="top">
      <div class="progress">Loading ...</div>
    </div>
    <div class="bottom">
      <div class="progress">Loading ...</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>
Notice that inside each of the main sides (front, back, bottom and top) there is a div with a class name 'progress', theses blocks will actually reflect the progress status when we set their width (in percentage).

CSS Code :

.wrap {
  perspective: 1000px;
  perspective-origin: 50% 50%;

  /*  Change this to adjust the 3d bar tilting */
  transform: rotateZ(0.01turn) rotateY(0.01turn);
}
.progress
{
  height: 100%;
  width: 0%;
  padding: 0px;
  transition: width 2s ease;
  
  overflow: visible;
  text-align: center;
  color: #000;
  font-family: verdana;
  font-size: 20px;
  white-space: nowrap;
  line-height: 45px;
  
  border-right: solid 2px #444;
  background-size: 50px 50px;
  /* Blue stripes */
  background-image: linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
  animation: bganim 1s linear 2s infinite;
}
@keyframes bganim {
  to { background-position: 50px;}
}
.cube {
  margin: auto;
  position: relative;
  height: 50px;
  width: 500px;
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear;
}

.cube > div {
  position: absolute;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  border: solid 1px #eee;
  background-size: 50px 50px;
  /* Grey stripes */
  background-image: linear-gradient(135deg,#ddd 25%,#eee 25%,#eee 50%, #ddd 50%, #ddd 75%,#eee 75%,#eee 100%);
  animation: bganim 1s linear 2s infinite;
}
.cube > .left,.cube > .right{
  height: 50px;
  width: 50px;
}

.front {
  transform: translateZ(25px);
}

.back {
  transform: translateZ(-25px) rotateX(180deg);
}

.top {
  transform: rotateX(-270deg) translateY(-25px);
  transform-origin: top center;
}

.bottom {
  transform: rotateX(270deg) translateY(25px);
  transform-origin: bottom center;
}

.left {
  transform: rotateY(270deg) translateX(-25px);
  transform-origin: center left;
}
.right {
  transform: rotateY(-270deg) translateX(25px) translateZ(450px);
  transform-origin: top right;
}

/* Rotating the 3d rectangle */
@keyframes rotate {
  100%{
    transform: rotateX(1turn);
  }
}

Setting up the progress value :

To change the progress position we only have to set a new percentage value to the property width of the Css class selector 'progress' :
$('.progress').css({ width: "80%" });

Browser Support

This code will run on all major browsers except IE, which till this date (August 2014) does not properly support the 'preserve-3d' keyword, all child elements are rendered flat in the same plane, but a functional preserve-3d should be implemented soon.
Also you have to add the '-webkit-' vendor prefix for Webkit browser like Chrome, Opera..

Have fun !

Don't hesitate to comment and feel free to use this 3d progress bar css scripts for your projects, and if you would like to provide credits, please link it to this article.
About the author :
Malek Chtiwi is the man behind Codicode.com
34 years old full stack developer.
Loves technology; but also likes design, photography and composing music.
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :


» Member access