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 Begin
Lets take a look at the HTML really quick. It’s not too difficult. The
loading-container just centers and positions the loading bar.
1
2
3
4
5
6
7
8
9
10
| <div class="loading-container"> <div class="loading-bar"> <div class="amount green" style="width: 40%;"> <!-- The width (and colour in class) --> <div class="loaded"> 40% <!-- Loaded amount --> </div> <div class="lines"></div> <!-- The lines! --> </div> </div></div> |
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.
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
| .loading-container { width: 600px; height: 300px; padding: 50px; margin: 0px auto; border-radius: 10px; background: rgba(255,255,255,0.6); border: 1px solid #eee;}.loading-container .loading-bar { margin-bottom: 40px;} |
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| .loading-bar { width: 500px; margin: 0px auto; height: 61px; border-radius: 5px; background-color: #282f32; padding: 4px 5px; box-shadow: inset 3px 0px 10px rgba(0,0,0,0.1);}.amount { /* we haven't included the colour yet, we'll get to that later. */ height: 60px; border-radius: 5px; white-space: nowrap; overflow: hidden; margin-top: -9px;} |
Next lets take a look at the background class (that’s the
lines div). 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| .lines { /* the lines overflow the container. This creates a continuous flow of the background */ width: 200%; /* We use a SVG file as the background */ background: url('lines.svg') repeat-x; height: 120%; text-align: center; margin-top: -35px; /* Any overflow is hidden */ overflow: hidden; border-radius: 50px; /* Implement the animations, we'll get to that later */ -webkit-animation: moveBars 1s linear infinite; -moz-animation: moveBars 1s linear infinite; -ms-animation: moveBars 1s linear infinite; -o-animation: moveBars 1s linear infinite; animation: moveBars 1s linear infinite; font-weight: bold; color: #fff; color: 1px; font-size: 18px; text-shadow: 0px 0px 10px rgba(0,0,0,0.3);} |
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!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| .loaded { text-align: center; font-family: Helvetica, sans-serif; font-weight: bold; position: relative; top: 9px; font-size: 30px; text-shadow: 0px 0px 10px rgba(0,0,0,0.2); color: #fff; z-index: 9999;}.green { background-color: #8ac320; box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #79aa1e , 0 7px 0 #628c14;}.blue { background-color: #20b9c3; box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #1e8aaa, 0 7px 0 #13768c;}.red { background-color: #dc6565; box-shadow: inset ,4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #d23333, 0 7px 0 #8c1212;} |
And finally, the animations. All we want to do is move the
.lines class 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.
1
2
3
4
5
6
| /* ANIMATIONS */@keyframes moveBars { 100% { margin-left: -180px; } }@-webkit-keyframes moveBars { 100% { margin-left: -180px; } }@-moz-keyframes moveBars { 100% { margin-left: -180px; } }@-ms-keyframes moveBars { 100% { margin-left: -180px; } }@-o-keyframes moveBars { 100% { margin-left: -180px; } } |
And that’s it for the CSS! Save the file, and continue onto the SVG background.
SVG
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.
1
2
3
4
5
| <title>Diagonal Lines</title> <desc>Some diagonal lines for use in the loading bar.</desc> <polygon fill="white" opacity="0.2" points="90,0 180,0 90,180 0,180" /></svg> |
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.svg and 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!
No comments:
Post a Comment