In recent times the web has gone crazy for imageless design, so I thought it would be cool to make an animated loading bar using SVG images, instead of the normal CSS block elements as shapes. Read on to learn more!
The idea behind this tutorial is we’re going to make a nice little loading bar using CSS, and then use an SVG image as the background. We’ll then animate this with CSS. It degrades quite nicely in browsers that don’t support animations. SVG itself is pretty widely supported, so we don’t have to worry about that!
Lets take a look at the HTML really quick. It’s not too difficult. The
loading-containerjust centers and positions the loading bar.
The loading bar is the main container for the loading bar, and then the child is the ‘amount’ the loading bar is filled. Then we have some text which is the numerical amount loaded, and the div containing the diagonal lines. I’ve put the lines in a separate div so we can animate them later. If you wanted this to be static you could have the lines as a background image on the actual amount div. Lets take a look at the CSS.
This is the main force behind making the loading bar look like a loading bar. To begin we’ll style the loading container really quick. It’s just some properties to center everything for presentation. You may decide to leave this bit out.
Next we want to change the styles of the loading bar container, and the amount div. The loading bar container will be a fixed width, and then the amount div will be a percentage of that div. We could then alter the width of the amount div to make it at different stages of loading.
Next lets take a look at the background class (that’s the
linesdiv). The main point of interest is we’re using an SVG object as the background. We’ll create the SVG file after we finish styling the CSS. I’ve also implemeneted the necessary animations in this class, which we’ll cover later. Should a browser not support animations, it will be static, which isn’t so bad.
The next class is just to style the text on top of the loading bar. Then we finally add the colours. Just some box shadows and background colours in whatever style you wish!
And finally, the animations. All we want to do is move the
.linesclass 180px to the left. So we say at 100% (the end of the animation), change the left margin to -180px. Usually animations take a lot of room in a CSS file (because of browser prefixes), but I managed to fit all this into 5 lines.
And that’s it for the CSS! Save the file, and continue onto the SVG background.
SVG, in my opinion, is a highly underrated technology in the web world. In SVG you can create any vector shape and use most CSS styles. You can then use it as a standalone image by embedding it, or import it in CSS for use as a background. In this tutorial, we’re using it as a background.
The main reason for using SVG in this demo was because webkit and opera have some problems with border radius and overflow. If you have opacity, use a relative position, or rotate an object in CSS (while using border radius), the contents will overflow the edge of the border. Another reason is it will degrade much more gracefully compared to using rotated divs for the lines.
So what does it all mean? The first line is sort of like the doctype of an HTML document. Next we give the SVG a title and description, for semantics. Then we draw our polygon. It’s just a simple white shape with an opacity of 0.2. Then we set the points. These are coordinates in the document in which we want the polygon points to be. Each set of points are separated by a space. After that all you have to do is put this stuff in a file called
lines.svgand save it in the same directory as your CSS file.
And we’re done! If you have any problems comment below, don’t forget to tweet and share. I’ve also included a demo so you can see it live. See you next time!