Strange thing using jQuery progressbar

Question

I'm trying to use just a single color in jQuery progressbar, but it fill the whole div.

Here's the problem, i just use these functions.

$(document).ready(function(){
    $("#progressbar").css({ "background": '#FF0000' });
    $("#progressbar").progressbar({  value: 10  });    
});

http://jsfiddle.net/jtf7M/1/

How do i make this fill properly, step by step?

mali303 · Accepted Answer · 2012-10-23T13:43:48.377

CSS file is missing. Add http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css to your resources and it will be ok.

Edit:

If you don't want to load whole CSS file, just add this code in your page http://jsfiddle.net/jtf7M/21/:

<style>
    .ui-progressbar { height:2em; text-align: left; overflow: hidden; }
    .ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
    .ui-widget-content {
        border: 1px solid #AAA;
        background: white;
    }
    .ui-corner-all {
        -moz-border-radius: 4px/*{cornerRadius}*/;
        -webkit-border-radius: 4px/*{cornerRadius}*/;
        -khtml-border-radius: 4px/*{cornerRadius}*/;
        border-radius: 4px/*{cornerRadius}*/;
    }
    .ui-widget-header {
        border: 1px solid #AAA/*{borderColorHeader}*/;
        background: #CCC;
    }
</style>

Oh thx, it works. But, do you know some way to make this work without using jquery-ui css? — , Oct 23 '12 at 13:11
You can add your own css if you don't want to load jquery-ui-css. — mali303, Oct 23 '12 at 13:42

score 0 · Answer 2 · answered Oct 23 '12 at 12:42

0

I think there is no jQuery ui lib load on that jsfiddle. But you are doing right.

http://jqueryui.com/progressbar/#animated

answered Oct 23 '12 at 12:42

Guerra

2,792
1
22
32

Strange thing using jQuery progressbar

2 Answers2