Pure CSS 3D Progress Bar Chart

Spread the love

A 3D chart is one of the attractive elements on the webpage. It shows users the statistics as well as gives them an eye catchy user experience. Although, there are multiple plugins or libraries to create 3D progress bar charts. But did you ever try to create such progress bars using CSS only? Well! here you will come to know how to create a 3D progress bar chart using pure CSS.

As you have seen in the above preview, there are different types of progress bars filled with decent colors. Each progress bar is divided into four parts and each part covers 25% of the chart. Thus, you can indicate any type of data filled with percentage values, show progress, or display reports data along with 3D charts.

The coding concept for a single 3D progress bar is that we’ll create three div elements for the top, slide, and floor face of the progress bar. Likewise, we’ll create containers for textual data along with charts. Then we’ll finalize the progress bars by styling them using CSS.

The HTML Structure

The HTML structure for the 3D progress bar consists of three components, the fill area, bar sides, and a container. The container element holds the ultimate view of the progress bar.

<div class="chart">
    <div class="bar bar-75 white">
        <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>

The Liquid type of 3D bar chart displays each part of the progress separately. If you want to create such kind of chart, build the HTML structure as given below:

<div class="chart grid">
    <div class="exercise second">
        <div class="bar bar-45 navy lightGray-face">
            <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 class="bar bar-80 yellow lightGray-face">
            <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 class="bar bar-60 red lightGray-face">
            <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>
</div>

In the above HTML, you can place the textual or numerical data that you want to show with 3D progress bar charts.

CSS Styles for 3D Progress Bar Chart

After creating the HTML, now it’s time to style the 3D progress bar chart. So, select the "chart" class and define its basic styles as follows:

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

After that, select the "bar" class and sides/face classes of the chart and define the CSS style as given below:

.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;
}

The "growing-bar" class handles the filling animation of the progress bar chart. Specify its CSS styles as mentioned below. If you want to increase/decrease the speed of the filling animation, you can change the transition value.

.growing-bar {
  transition: all 0.3s ease-in-out;
  background-color: rgba(236, 0, 140, 0.6);
  width: 100%;
  height: 2em;
}

The following CSS styles describe the various color schemes/themes for the progress bars. You need to add it to your project, you can update the values to customize the theme according to your needs.

.bar.yellow .side-a,
.bar.yellow .growing-bar {
  background-color: rgba(241, 196, 15, 0.6);
}
.bar.yellow .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em rgba(241, 196, 15, 0.8);
}
.bar.yellow .floor .growing-bar {
  box-shadow: 0em 0em 2em rgba(241, 196, 15, 0.8);
}
.bar.red .side-a, input[id='red']:checked ~ .chart .side-a,
.bar.red .growing-bar,
input[id='red']:checked ~ .chart .growing-bar {
  background-color: rgba(236, 0, 140, 0.6);
}
.bar.red .side-0 .growing-bar, input[id='red']:checked ~ .chart .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em rgba(236, 0, 140, 0.8);
}
.bar.red .floor .growing-bar, input[id='red']:checked ~ .chart .floor .growing-bar {
  box-shadow: 0em 0em 2em rgba(236, 0, 140, 0.8);
}
.bar.cyan .side-a, input[id='cyan']:checked ~ .chart .side-a,
.bar.cyan .growing-bar,
input[id='cyan']:checked ~ .chart .growing-bar {
  background-color: rgba(87, 202, 244, 0.6);
}
.bar.cyan .side-0 .growing-bar, input[id='cyan']:checked ~ .chart .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #57caf4;
}
.bar.cyan .floor .growing-bar, input[id='cyan']:checked ~ .chart .floor .growing-bar {
  box-shadow: 0em 0em 2em #57caf4;
}
.bar.navy .side-a,
.bar.navy .growing-bar {
  background-color: rgba(10, 64, 105, 0.6);
}
.bar.navy .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em rgba(10, 64, 105, 0.8);
}
.bar.navy .floor .growing-bar {
  box-shadow: 0em 0em 2em rgba(10, 64, 105, 0.8);
}
.bar.lime .side-a, input[id='lime']:checked ~ .chart .side-a,
.bar.lime .growing-bar,
input[id='lime']:checked ~ .chart .growing-bar {
  background-color: rgba(118, 201, 0, 0.6);
}
.bar.lime .side-0 .growing-bar, input[id='lime']:checked ~ .chart .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #76c900;
}
.bar.lime .floor .growing-bar, input[id='lime']:checked ~ .chart .floor .growing-bar {
  box-shadow: 0em 0em 2em #76c900;
}
.bar.white .side-a,
.bar.white .growing-bar {
  background-color: rgba(254, 254, 254, 0.6);
}
.bar.white .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #fefefe;
}
.bar.white .floor .growing-bar {
  box-shadow: 0em 0em 2em #fefefe;
}
.bar.gray .side-a,
.bar.gray .growing-bar {
  background-color: rgba(68, 68, 68, 0.6);
}
.bar.gray .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #444;
}
.bar.gray .floor .growing-bar {
  box-shadow: 0em 0em 2em #444;
}
.chart .bar.yellow-face .face {
  background-color: rgba(241, 196, 15, 0.2);
}
.chart .bar.lime-face .face {
  background-color: rgba(118, 201, 0, 0.2);
}
.chart .bar.red-face .face {
  background-color: rgba(236, 0, 140, 0.2);
}
.chart .bar.navy-face .face {
  background-color: rgba(10, 64, 105, 0.2);
}
.chart .bar.cyan-face .face {
  background-color: rgba(87, 202, 244, 0.2);
}
.chart .bar.gray-face .face {
  background-color: rgba(68, 68, 68, 0.2);
}
.chart .bar.lightGray-face .face {
  background-color: rgba(145, 145, 145, 0.2);
}

Similarly, add the following CSS styles that describe the fill area theme of the progress chart.

.bar-0 .growing-bar {
  width: 0%;
}
.bar-1 .growing-bar {
  width: 1%;
}
.bar-2 .growing-bar {
  width: 2%;
}
.bar-3 .growing-bar {
  width: 3%;
}
.bar-4 .growing-bar {
  width: 4%;
}
.bar-5 .growing-bar {
  width: 5%;
}
.bar-6 .growing-bar {
  width: 6%;
}
.bar-7 .growing-bar {
  width: 7%;
}
.bar-8 .growing-bar {
  width: 8%;
}
.bar-9 .growing-bar {
  width: 9%;
}
.bar-10 .growing-bar {
  width: 10%;
}
.bar-11 .growing-bar {
  width: 11%;
}
.bar-12 .growing-bar {
  width: 12%;
}
.bar-13 .growing-bar {
  width: 13%;
}
.bar-14 .growing-bar {
  width: 14%;
}
.bar-15 .growing-bar {
  width: 15%;
}
.bar-16 .growing-bar {
  width: 16%;
}
.bar-17 .growing-bar {
  width: 17%;
}
.bar-18 .growing-bar {
  width: 18%;
}
.bar-19 .growing-bar {
  width: 19%;
}
.bar-20 .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar {
  width: 20%;
}
.bar-21 .growing-bar {
  width: 21%;
}
.bar-22 .growing-bar {
  width: 22%;
}
.bar-23 .growing-bar {
  width: 23%;
}
.bar-24 .growing-bar {
  width: 24%;
}
.bar-25 .growing-bar, input[id='pos-0']:checked ~ .chart .growing-bar {
  width: 25%;
}
.bar-26 .growing-bar {
  width: 26%;
}
.bar-27 .growing-bar {
  width: 27%;
}
.bar-28 .growing-bar {
  width: 28%;
}
.bar-29 .growing-bar {
  width: 29%;
}
.bar-30 .growing-bar {
  width: 30%;
}
.bar-31 .growing-bar {
  width: 31%;
}
.bar-32 .growing-bar {
  width: 32%;
}
.bar-33 .growing-bar {
  width: 33%;
}
.bar-34 .growing-bar {
  width: 34%;
}
.bar-35 .growing-bar {
  width: 35%;
}
.bar-36 .growing-bar {
  width: 36%;
}
.bar-37 .growing-bar {
  width: 37%;
}
.bar-38 .growing-bar {
  width: 38%;
}
.bar-39 .growing-bar {
  width: 39%;
}
.bar-40 .growing-bar {
  width: 40%;
}
.bar-41 .growing-bar {
  width: 41%;
}
.bar-42 .growing-bar {
  width: 42%;
}
.bar-43 .growing-bar {
  width: 43%;
}
.bar-44 .growing-bar {
  width: 44%;
}
.bar-45 .growing-bar {
  width: 45%;
}
.bar-46 .growing-bar {
  width: 46%;
}
.bar-47 .growing-bar {
  width: 47%;
}
.bar-48 .growing-bar {
  width: 48%;
}
.bar-49 .growing-bar {
  width: 49%;
}
.bar-50 .growing-bar, input[id='pos-1']:checked ~ .chart .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar {
  width: 50%;
}
.bar-51 .growing-bar {
  width: 51%;
}
.bar-52 .growing-bar {
  width: 52%;
}
.bar-53 .growing-bar {
  width: 53%;
}
.bar-54 .growing-bar {
  width: 54%;
}
.bar-55 .growing-bar {
  width: 55%;
}
.bar-56 .growing-bar {
  width: 56%;
}
.bar-57 .growing-bar {
  width: 57%;
}
.bar-58 .growing-bar {
  width: 58%;
}
.bar-59 .growing-bar {
  width: 59%;
}
.bar-60 .growing-bar {
  width: 60%;
}
.bar-61 .growing-bar {
  width: 61%;
}
.bar-62 .growing-bar {
  width: 62%;
}
.bar-63 .growing-bar {
  width: 63%;
}
.bar-64 .growing-bar {
  width: 64%;
}
.bar-65 .growing-bar {
  width: 65%;
}
.bar-66 .growing-bar {
  width: 66%;
}
.bar-67 .growing-bar {
  width: 67%;
}
.bar-68 .growing-bar {
  width: 68%;
}
.bar-69 .growing-bar {
  width: 69%;
}
.bar-70 .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
  width: 70%;
}
.bar-71 .growing-bar {
  width: 71%;
}
.bar-72 .growing-bar {
  width: 72%;
}
.bar-73 .growing-bar {
  width: 73%;
}
.bar-74 .growing-bar {
  width: 74%;
}
.bar-75 .growing-bar, input[id='pos-2']:checked ~ .chart .growing-bar {
  width: 75%;
}
.bar-76 .growing-bar {
  width: 76%;
}
.bar-77 .growing-bar {
  width: 77%;
}
.bar-78 .growing-bar {
  width: 78%;
}
.bar-79 .growing-bar {
  width: 79%;
}
.bar-80 .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
  width: 80%;
}
.bar-81 .growing-bar {
  width: 81%;
}
.bar-82 .growing-bar {
  width: 82%;
}
.bar-83 .growing-bar {
  width: 83%;
}
.bar-84 .growing-bar {
  width: 84%;
}
.bar-85 .growing-bar {
  width: 85%;
}
.bar-86 .growing-bar {
  width: 86%;
}
.bar-87 .growing-bar {
  width: 87%;
}
.bar-88 .growing-bar {
  width: 88%;
}
.bar-89 .growing-bar {
  width: 89%;
}
.bar-90 .growing-bar {
  width: 90%;
}
.bar-91 .growing-bar {
  width: 91%;
}
.bar-92 .growing-bar {
  width: 92%;
}
.bar-93 .growing-bar {
  width: 93%;
}
.bar-94 .growing-bar {
  width: 94%;
}
.bar-95 .growing-bar {
  width: 95%;
}
.bar-96 .growing-bar {
  width: 96%;
}
.bar-97 .growing-bar {
  width: 97%;
}
.bar-98 .growing-bar {
  width: 98%;
}
.bar-99 .growing-bar {
  width: 99%;
}
.bar-100 .growing-bar, input[id='pos-3']:checked ~ .chart .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
  width: 100%;
}

That’s all! I hope you have successfully integrated this pure CSS 3D progress bar chart into your project. If you have any questions or suggestions, let me know by comment below.

Share it!

You May Also Like

Leave a Comment