Create A Fancy
Progress Bar Using CSS3 And jQuery
You can find lots of CSS3 tutorials out there but what makes
this one different from the rest is that this one actually shows you a numeric
representation (i.e. a percentage) of how much longer the process is going to
take, unlike the others that just leave you guessing. Below is a screenshot of
the resulting product of what we will be creating.
Here’s a link to the demo for you to see the code in
action and really appreciate its beauty.
Now let’s begin with the HTML.
HTML Markup
|
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>Pure
CSS Progress Bar</title>
<link
rel="stylesheet" href="stylesheets/ui.css">
<link rel="stylesheet"
href="stylesheets/ui.progress-bar.css">
</head>
<body>
<div
id="container">
<div
id="progress_bar" class="ui-progress-bar
ui-container">
<div class="ui-progress" style="width:
79%;">
<span
class="ui-label" style="display:none;">Processing
<b class="value">79%</b></span>
</div><!-- .ui-progress -->
</div><!-- #progress_bar -->
<div
class="content" id="main_content" style="display:
none;">
<p>Hello,
World!</p>
</div><!--
#main_content -->
</div><!--
#container -->
</body>
</html>
|
Our CSS will kick off with the basic styles for the layout
and then followed by some real serious stuff starting with @-webkit-keyframes animate-stripes {, that’s the part that’s going
to deal with the progress bar itself.
CSS3 Markup
|
body {
background:#eee;
padding: 30px;
font-size: 62.5%;
font-family: 'Helvetica
Neue', Helvetica, Arial, sans-serif;
position: relative;
margin: 0;
}
#container {
margin: 0 auto;
width: 460px;
padding: 2em;
background: #DCDDDF;
}
.ui-progress-bar {
margin-top: 3em;
margin-bottom: 3em;
}
.ui-progress span.ui-label {
font-size: 1.2em;
position: absolute;
right: 0;
line-height: 33px;
padding-right: 12px;
color: rgba(0,0,0,0.6);
text-shadow:
rgba(255,255,255, 0.45) 0 1px 0px;
white-space: nowrap;
}
@-webkit-keyframes
animate-stripes {
from {
background-position: 0 0;
}
to {
background-position: 44px 0;
}
}
.ui-progress-bar {
position: relative;
height: 35px;
padding-right: 2px;
background-color: #abb2bc;
border-radius: 35px;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
background:
-webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6),
color-stop(1, #9da5b0));
background:
-moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);
-webkit-box-shadow: inset 0px
1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
-moz-box-shadow: inset 0px
1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
box-shadow: inset 0px 1px 2px
0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
}
.ui-progress {
position: relative;
display: block;
overflow: hidden;
height: 33px;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
border-radius: 35px;
-webkit-background-size: 44px
44px;
background-color: #74d04c;
background:
-webkit-gradient(linear, 0 0, 44 44,
color-stop(0.00,
rgba(255,255,255,0.17)),
color-stop(0.25,
rgba(255,255,255,0.17)),
color-stop(0.26,
rgba(255,255,255,0)),
color-stop(0.50, rgba(255,255,255,0)),
color-stop(0.51,
rgba(255,255,255,0.17)),
color-stop(0.75,
rgba(255,255,255,0.17)),
color-stop(0.76,
rgba(255,255,255,0)),
color-stop(1.00,
rgba(255,255,255,0))
), -webkit-gradient(linear,
left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));
background:
-moz-repeating-linear-gradient(top left -30deg,
rgba(255,255,255,0.17),
rgba(255,255,255,0.17)
15px,
rgba(255,255,255,0) 15px,
rgba(255,255,255,0) 30px
),
-moz-linear-gradient(#9bdd62 0%, #74d04c 100%);
-webkit-box-shadow: inset 0px
1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
-moz-box-shadow: inset 0px
1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
box-shadow: inset 0px 1px 0px
0px #dbf383, inset 0px -1px 1px #58c43a;
border: 1px solid #4c8932;
-webkit-animation:
animate-stripes 2s linear infinite;
}
|
jQuery
Now that we’ve taken care of how the progress bar will look,
it’s time for jQuery to do its magic by adding the animation. This is going to
involve two steps:
Step 1: Paste this short code just before the closing
body tag </body> of your html
file.
|
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript" charset="utf-8"></script>
<script src="progress.js" type="text/javascript"
charset="utf-8"></script>
|
Step 2:
Create a JavaScript (.js) file and paste this code in it.
|
({
width: progress+'%'
}, {
duration: 2000,
easing: 'swing(function(
$ ){
$.fn.animateProgress =
function(progress, callback) {
return this.each(function()
{
$(this).animate ',
step: function(
progress ){
var labelEl =
$('.ui-label', this),
valueEl =
$('.value', labelEl);
if
(Math.ceil(progress) < 20 && $('.ui-label',
this).is(":visible")) {
labelEl.hide();
}else{
if
(labelEl.is(":hidden")) {
labelEl.fadeIn();
};
}
if
(Math.ceil(progress) == 100) {
labelEl.text('Done');
setTimeout(function() {
labelEl.fadeOut();
}, 1000);
}else{
valueEl.text(Math.ceil(progress) + '%');
}
},
complete:
function(scope, i, elem) {
if (callback) {
callback.call(this,
i, elem );
};
}
});
});
};
})( jQuery );
$(function() {
$('#progress_bar .ui-progress
.ui-label').hide();
$('#progress_bar
.ui-progress').css('width', '7%');
$('#progress_bar .ui-progress').animateProgress(43,
function() {
$(this).animateProgress(79,
function() {
setTimeout(function() {
$('#progress_bar
.ui-progress').animateProgress(100, function() {
$('#main_content').slideDown();
});
}, 2000);
});
});
});
|
Now save your .js file and then try to open your HTML file
to see how you did. Once the progress bar reaches 100 a small message below it
that says “Hello World” is going to appear. Hope you enjoy doing this tutorial,
but more importantly, I hope that you’ll have fun incorporating this in to your
website.
This code used is originally authored by Ivan Vanderbyl, and for this, he
deserves our thanks.
For more of the awesome jQuery resources you can check out the jQuery tutorial site
No comments:
Post a Comment