How To Draw A Glossy 2.0 Loading Bar Vector In Illustrator

In this tutorial we’re going to show you how to draw a glossy slick looking loading bar in illustrator. The benefits of doing a project like this in illustrator is that it uses vectorization. By vectorizing this drawing we can resize it to what ever width and height we want without losing the quality of the image (pixelated). You can also transfer our vector from illustrator over to photoshop for easy editing.

Creative Commons – Some Rights Reserved

Step 1

First we’ll start with a clean document with the size of 800 x 600. Then we’re going to create a atmospheric background that gives depth with shadowing. So grab your Rectangle Tool and draw a rectangle 800 x 380 and align it to the middle-top of your document, then grab the gradient tool and click the square. After you clicked the square it should add a black and white gradient, replace the a dark gray and scoot the gradient to the middle-top of the square and stretch it out like in the picture. Make sure you select radial gradient on your gradient tab as well.

Now make another square this time 800 x 220 and align it to the bottom middle of your document and add another gradient to it, same color but this time make the gradient linear with the dark gray at the bottom.

Now we got a nice looking black background ready for us to start our loading bar.

Step 2

Go ahead and grab the Rounded Corner Tool, click Preferences at the top and set rounded corners to 4px. Create a decent size rectangle to your liking, then color it light gray, I used #999999. Duplicate that layer and move the new rectangle down 1px with your down arrow (when selected). Grab your gradient tool once again and select the new rectangle and use the radial gradient and fill with with black and dark gray once again (like the picture below).

Copy and paste the first light gray rectangle and paste it in front, overlaying the first rectangle. Grab your gradient tool and add a linear gradient to the square with the top being white and the bottom being white at 40% opacity. Now what you need to do is lock and hide all the other layers besides the front path. Grab your square tool and draw a rectangle overlaying half (horizontally) the rectangle and go to Windows > Pathfinder and select both rectangles and select Minus Front. This will remove the rectangle and leave our background rectangle with half its height but keeps our top rounded corners, select the finished product and go to your transparency tab and reduce it to 40%.

*Group these layers together and make sure to lock them (Your backgrounds should be in a separate group and locked as well if you haven’t already done so).

This is what you should have so far..

Looking pretty good so far, we now have our background set up with our empty glossy loading bar. Now we’re going to fill this bar so we have something that actually shows us our loading!

Step 3.

So essentially we just got through with all of our core basics needed for this project, from here on out it’s pretty much a copy, paste and edit process of what we already have. So in saying that copy the whole empty bar group and paste it into a new group. First go to our new path with the gray rectangle and fill it with the color #E9FCFF. Now go and select our new path with our black and dark gray gradient rectangle and we’re going to change the gradient to linear and set the gradient as the picture shows below. The colors I used were #07F2FB for the middle gradient and #006AC0 for the two outside gradients. So now we have a filled colored bar that looks great and ready to add our final touches of the project.

Now on to our final touches

Next we’ll add a nice reflect of our filled bar to give off a three dimension to match with our background as if the loading bar is floating in mid air with soft metals around it. Go in our filled bar group and copy/paste the filled path that we previously created and place it at the bottom of the document where our second background gradient is located. Go to Effect > Blur > Gaussian Blue and set it to 14, then go to the transparency tab and reduce down to 40%, then scale it down so it matches the size of the original filled bar.

Final Product

If you kept up with everything then you will have successfully drawn a vectorized loading bar in illustrator! Congratulations, now you can move onto our part 2 of this tutorial we’re we’ll be implementing these vectors into flash to be used as a preloading mechanism.

Drawing, Freebies, Illustrator, Tutorial, Vectors