Submit your widget

3D progress bars with CSS/Sass

Created 4 years ago   Views 11476   downloads 2148    Author tympanus
3D progress bars with CSS/Sass
View DemoDownload 527.5 KB
Share |

The demo will show you how to create some interesting 3D progress bars with CSS/Sass. Discover how to use box shadows and gradients to create realistic looking skins.

we’d like to show you how to create some pure CSS progress bars with a special 3D look. Consider this tutorial an advanced CSS exercise that will give you insight in a lot of interesting 3D properties and shading techniques. Creating UI components using only CSS will train your ability to think outside of the box and in this tutorial we will show you some tricks on how to create a more complex shape, use it as a progress bar and animate it.

Building the Faces

Let’s start by building a box which will contain all the six faces. This box will work as our main container setting the sizes of our bar and its view point. We’ll also use a wrapper for the perspective, and this wrapper’s font-size property will allow is to scale the progress bar with the help of some em unit magic.

To make sure that all the faces are part of our 3D space, we need to apply transform-style: preserve-3d to the box.

So let’s start writing our styles by initiating some color variables:

$light-gray: #e0e0e0;
$magenta: #ec0071;
$white: #f5f5f5;

.perspective {
	font-size: 5em; // sets the main scale size
	perspective: 12em; // sets the perspective
	perspective-origin: 50% 50%;
	text-align: center;

.bar {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-top: 1em;
	position: relative;
	transform: rotateX(60deg); // sets the view point
	transform-style: preserve-3d; // perspective for the children

Now, let’s think about the faces. If we want to be able to rescale our main box without problems, the faces contained inside must have a liquid behavior and an absolute position.

.bar {
	// -> The SCSS written before
	.bar-face {
		display: inline-block;
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: rgba($light-gray, .6); // just to see what is happening

Read more: