CSS3 Animated Loading Bar
I’m working on a project that requires a bit of Javascript loading time before displaying the UI, so instead of doing what I usually do and downloading an animated gif from ajaxload I thought it would be a good opportunity to try out a CSS3 animation.
Inspired by 37 Signals loading bar (pictured above) and making good use of Chris Coyier’s tutorial on CSS3 Progress Bars I set to work designing a bar in Photoshop and then replicating it in CSS3.
CSS and Markup
Here is the source code if you want to try it yourself.
<style>
/*
Set the container for the bar
*/
.bar {
height:20px;
width:200px;
padding:10px;
margin:200px auto 0;
background-color:rgba(0,0,0,.1);
-webkit-border-radius:25px;
-moz-border-radius:25px;
-ms-border-radius:25px;
border-radius:20px;
-webkit-box-shadow:0 1px 0 rgba(255,255,255,.03),inset 0 1px 0 rgba(0,0,0,.1);
-moz-box-shadow:0 1px 0 rgba(255,255,255,.03),inset 0 1px 0 rgba(0,0,0,.1);
-ms-box-shadow:0 1px 0 rgba(255,255,255,.03),inset 0 1px 0 rgba(0,0,0,.1);
box-shadow:0 1px 0 rgba(255,255,255,.03),inset 0 1px 0 rgba(0,0,0,.1);
}
/*
This is the actual bar with stripes
*/
.bar span {
display:inline-block;
height:100%;
width:100%;
border:1px solid #ff9a1a;
border-bottom-color:#ff6201;
background-color:#d3d3d3;
-webkit-border-radius:20px;
-moz-border-radius:20px;
-ms-border-radius:20px;
border-radius:20px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
background-image:
-webkit-linear-gradient(
-45deg,
rgba(255, 154, 26, 1) 25%,
transparent 25%,
transparent 50%,
rgba(255, 154, 26, 1) 50%,
rgba(255, 154, 26, 1) 75%,
transparent 75%,
transparent
);
background-image:
-moz-linear-gradient(
-45deg,
rgba(255, 154, 26, 1) 25%,
transparent 25%,
transparent 50%,
rgba(255, 154, 26, 1) 50%,
rgba(255, 154, 26, 1) 75%,
transparent 75%,
transparent
);
background-image:
-ms-linear-gradient(
-45deg,
rgba(255, 154, 26, 1) 25%,
transparent 25%,
transparent 50%,
rgba(255, 154, 26, 1) 50%,
rgba(255, 154, 26, 1) 75%,
transparent 75%,
transparent
);
background-image:
linear-gradient(
-45deg,
rgba(255, 154, 26, 1) 25%,
transparent 25%,
transparent 50%,
rgba(255, 154, 26, 1) 50%,
rgba(255, 154, 26, 1) 75%,
transparent 75%,
transparent
);
-webkit-background-size:50px 50px;
-moz-background-size:50px 50px;
-ms-background-size:50px 50px;
background-size:50px 50px;
-webkit-animation:move 2s linear infinite;
-moz-animation:move 2s linear infinite;
-ms-animation:move 2s linear infinite;
animation:move 2s linear infinite;
-webkit-border-radius:20px;
-moz-border-radius:20px;
-ms-border-radius:20px;
border-radius:20px;
overflow: hidden;
-webkit-box-shadow:inset 0 10px 0 rgba(255,255,255,.2);
-moz-box-shadow:inset 0 10px 0 rgba(255,255,255,.2);
-ms-box-shadow:inset 0 10px 0 rgba(255,255,255,.2);
box-shadow:inset 0 10px 0 rgba(255,255,255,.2);
}
/*
Animate the stripes
*/
@-webkit-keyframes move{
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
@-moz-keyframes move{
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
@-ms-keyframes move{
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
@keyframes move{
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
</style>
<!-- Start of loading bar -->
<div class="bar">
<span></span>
</div>
<!-- End of loading bar -->If you like it please give it some love on Dribbble.
Related articles
13 Appreciated Comments
Have a comment? Tweet @leemunroe and I'll be glad to respond.
On the , SaMot91 said:
You are using a vendor-prefixed version of keyframes. (-webkit-)
As a consequence, it does not work on Firefox and on any non-webkit browser.
You should add the non-prefixed rule as well for your code to be evolutive & standard compliant.
On the , Catalin Rosu said:
Nice one Lee.
I’d have a question though: why you omitted the keyframes animation for other browsers like FF, IE10 or (lately) Opera 12?
On the , Thomas Burleson said:
This is a nice loading/busy indicator using an indeterminant progress bar. Cool!
When you need to show loading progress, you can can the width of the span:
.bar > span {
width: 90px;
}
So with jQuery (for example)
$(“.bar > span”).css(‘width’, 90)
So now you sample can be used as a loading indicator and/or a loading progress indicator. Sweet!
Thanks again,
ThomasB
On the , louisremi said:
It doesn’t work in Firefox here, although I see you took the time to add the appropriate prefixed properties.
On the , Thomas Burleson said:
I created a jsFiddle that demos your loading indicator AND my progress bar idea. See http://jsfiddle.net/ThomasBurleson/wJwBu/
On the , Adam Messinger said:
Firefox supports @keyframes with the -moz- prefix since v5.0, IE supports it with -ms- in v10, and Opera supports it in v12 with -o-. Can you add these to your code samples and demo as well?
On the , Lee said:
Update: Updated the demo and CSS above so now compatible with Firefox and IE10
On the , Lee said:
@Thomas: Awesome, looks great!
On the , Ryan Freebern said:
Lee,
I was inspired by this to create my own version that’s a bit simpler and works in both webkit and gecko (I haven’t added the -o and -ms properties yet, but they should work fine).
http://jsfiddle.net/rfreebern/2mvqT/
Thanks for the neat idea!
On the , suanlian tangpua said:
This is so cool !!
On the , Larry Gerndt said:
just because you *can* doesn’t mean it’s worth all that CSS.
On the , Krishna Kiran said:
Cool design.. Can you tell me how to use it on my wp site? Waiting for more like this..
On the , Dinesh Kumar Shaw said:
Good one.Thanks for the idea…