hello and welcome to Red Stapler channel in this tutorial I'm going to show you how
to create a 3d transparent progress bar fit CSS transform in just a few minutes
ready let's check it out here is the progress bar we are going to make it
looks pretty nice but actually it's simply built from rectangle divs on each
side so the key concept is to create dips and use CSS transform to rotate
them into the right angle and position we'll start with HTML structure first
we'll create a wrapper depth to define the size and position
next create another dip for progress bar which inside we will create divs for
each side
you see that I didn't create right side because the bar will be transparent
anyway so the right size is unnecessary now let's work on the CSS I'm going to
define width and height off the progress bar and place it in the middle of the
screen using 50% top left and minus 50% translate
for the inner div I'm going to set the width and height to 100% and set the
transform style to preserve 3d
for each side I'm going to set a width and height to 100% as well and put a
transparent background color
and here is the result so far
next I'm going to move off these divs to be on the same spot by setting top and
left to zero and position to absolute
the next step is to rotate to make a rectangular tube since we are
going to work on 3d I'm going to add some rotation to the bar so we can see
it in perspective view
let's rotate the bottom side first by adding translate and 90 degrees rotation
and also set a transform origin which is the rotation point to bottom I'm going
to add a box shadow as well
I'm going to apply the same concept to all sides you can find a source code of
this tutorial at the link below
so here's the bar the next step is to add a progress filler let's go back to
HTML and add a div inside each side except left one
then set the height to 100% and add a background color
I'm also going to add box shadow with the same color as well to create a glow effect
the width of this class will represent the progress let's set it to 70% for now
now the bar is finished
you can control it by using a simple jQuery class selector to set the width liek this
so that's all for this tutorial hope you guys enjoyed it like subscribe or follow
us on Facebook to stay with us for more tutorial like this
thanks for watching and see you next upload bye