I've been struggling to fix a progress bar issue. I downloaded one, but it's showing reverse animation. Despite my attempts at troubleshooting, nothing seems to work. Any suggestions on how to resolve this?
Here's my HTML:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="progressbar.js"></script>
<link rel="stylesheet" type="text/css" href="progressbar.css">
<link rel="stylesheet" type="text/css" href="skins/default/progressbar.css">
</head>
<body>
<div id="progressBar" class="default"><div></div></div>
<script>
progressBar(40, $('#progressBar'));
</script>
</body>
</html>
This is the CSS:
.default {
background: #292929;
border: 1px solid #111;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 5px #333;
}
.default div {
background-color: #1a82f7;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0099FF), to(#1a82f7));
background: -webkit-linear-gradient(top, #0099FF, #1a82f7);
background: -moz-linear-gradient(top, #0099FF, #1a82f7);
background: -ms-linear-gradient(top, #0099FF, #1a82f7);
background: -o-linear-gradient(top, #0099FF, #1a82f7);
}
Finally, here's the JavaScript file:
function progressBar(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
}
Modified CSS for reference:
.default {
background: #292929;
border: 1px solid #111;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 5px #333;
}
.default div {
width: 0;
background-color: #1a82f7;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0099FF), to(#1a82f7));
background: -webkit-linear-gradient(top, #0099FF, #1a82f7);
background: -moz-linear-gradient(top, #0099FF, #1a82f7);
background: -ms-linear-gradient(top, #0099FF, #1a82f7);
background: -o-linear-gradient(top, #0099FF, #1a82f7);
}