Create a 3D Progress Bar with Just CSS

This a cool practice for CSS and transform style. Above you can watch the speed code video of this project also here is the repo.

First, let’s write HTML elements. We will add a div element for each face and a child element showing the process except for the right and left face.

First of all, we create a div element with bar-wrapper class. This element will wrap all our 3D scene with the perspective style. We add another div element with class of bar this will wrap all our faces and will have a rotateX style. Rotation will give our bar the effect of looking above.

Finally, we add 6 elements with face and according direction name as class name. We style face class with a transparent background color. We give translate and rotate values according face elements. We add elements with class of state inside face elements except right and left ones.