CODEWITHSUNDEEP
javascriptjqueryjquery-uiprogress-bar
No1Lives4Ever
No1Lives4Ever

Reputation: 6883

JQuery ProgressBar change default colors

I"m using JQuery Progress-Bar and want to change his white\grey color schema.

Currenly- empty space is colored with White and filled space colored with Grey.

Progress Bar defualt color schema

My needed colors schema: Black for empty spaces and Red for Filled spaces.

This is how my html looks like:

<div id="progress" style="margin-top:50px;">
    <div id="progressbar"><div class="progress-label">Loading...</div></div>
</div>

This is how I'm controlling my progress back behaviour:

var progressbar = $("#progressbar"), progressLabel = $(".progress-label");
progressbar.progressbar({
    value: false,
    change: function () {
        progressLabel.text(progressbar.progressbar("value") + "%");
    },
    complete: function () {
        progressLabel.text("Complete!");
    }
});

How can I changed this colors?

Upvotes: 1

Views: 2077

Answers (2)

Paweł Gołąb
Paweł Gołąb

Reputation: 189

There are two classes that you want to style:

  • ui-progressbar for empty spaces
  • ui-progressbar-value for filled spaces

background parameter determines color in both cases.

CSS schema for your needs would be something like this:

  .ui-progressbar {
    background: black;
    //... other values ...
  }

  .ui-progressbar-value {
    background: red;
    //... other values ...
  }

Here is working sample: plnkr

Upvotes: 3

Numbersgame
Numbersgame

Reputation: 13

Check here for info on theming: http://api.jqueryui.com/progressbar/

You should be able to define the colors by editing the main jquery-ui CSS, specifically the ui-progressbar class (for the main container) and the ui-progressbar-value class for the percentage/progress.

Upvotes: 1

Related Questions