How to Make a Fancy Progress Bar With CSS3 And jQuery
Ivan Vanderbyl ‘s cool CSS3 tutorial actually shows us a numeric representation (i.e. percentage) of how long a process is going to take in modern browsers. Below is a screenshot of the resulting product, which you can click on to view the demo.
Now let’s start 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”>
<div 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 starts off with the basic styles for the layout, followed by some real serious stuff starting with @-webkit-keyframes animate-stripes {, which deals 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 </body> tag 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.
(function( $ ){
$.fn.animateProgress = function(progress, callback) {
return this.each(function() {
$(this).animate({
width: progress+’%’
}, {
duration: 2000,
easing: ‘swing’,
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);
});
});
});
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 “Hello World” greeting will appear.
Hope you enjoy doing this tutorial, but more importantly, I hope that you’ll have fun incorporating this in to your website.
|
<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> |
0
513
