CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sidarth
Sidarth

Reputation: 136

Progress Bar in jquery showing reverse animation

I want a progress bar . I downloaded one but it is showing reverse animation. I have tried figuring it out but nothing seems to work Any idea how to fix it???

this is 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 my 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);
}

and finally the javascript file

function progressBar(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "%&nbsp;");
}

modified css

.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);
}

Upvotes: 0

Views: 1340

Answers (1)

JLRishe
JLRishe

Reputation: 101730

You need to start out the width of your inner div at 0, otherwise its width will be 100% by default:

.default div {
    width: 0;    /*  <--- here   */
    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);
}

http://jsfiddle.net/pjg99q7s/

Slightly fancier example:

http://jsfiddle.net/pjg99q7s/2/

Upvotes: 1

Related Questions