Custom Progress bar appearance, GXT 4.0, with custom bar color. This was copied from Triton.

CustomColorProgressBar.gss

/* created from triton */
@def BORDER_WIDTH 0px 0px 0px 0px;
@def BORDER_COLOR #000000;
@def BORDER_STYLE none;
@def GRADIENT ;
@def TEXT_FAMILY 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
@def TEXT_SIZE 13px;
@def TEXT_WEIGHT bold;
@def TEXT_COLOR #666666;
@def BAR_TEXT_COLOR #666666;
@def TEXT_ALIGN center;
@def TEXT_PADDING 3px 0px 3px 0px;
@def BAR_GRADIENT #c1ddf1 0%, #c1ddf1 100%;
@def BAR_BORDER_WIDTH 0px 0px 0px 0px;
@def BAR_BORDER_COLOR #000000;
@def BAR_BORDER_STYLE none;

.wrap {
  border-width: BORDER_WIDTH;
  border-style: BORDER_STYLE;
  border-color: BORDER_COLOR;
  position: relative;
  overflow: hidden;
  background: -webkit-linear-gradient(top, GRADIENT);
  /* @alternate */ background: -ms-linear-gradient(top, GRADIENT);
  /* @alternate */ background: linear-gradient(to bottom, GRADIENT);
}

.bar {
  z-index: 100;
  width: 99%;
  overflow: hidden;
  position: relative;
  top: 0;
  border-width: BAR_BORDER_WIDTH;
  border-style: BAR_BORDER_STYLE;
  border-color: BAR_BORDER_COLOR;
  background: -webkit-linear-gradient(top, BAR_GRADIENT);
  /* @alternate */ background: -ms-linear-gradient(top, BAR_GRADIENT);
  /* @alternate */ background: linear-gradient(to bottom, BAR_GRADIENT);
}

.text {
  font-family: TEXT_FAMILY;
  font-weight: TEXT_WEIGHT;
  font-size: TEXT_SIZE;
  color: BAR_TEXT_COLOR;
  text-align: TEXT_ALIGN;
  padding: TEXT_PADDING;
}

.textBack {
  overflow: hidden;
  z-index: 99;
  width: 100%;
  color: TEXT_COLOR;
  position: absolute;
  left: 0;
  top: 0;
}

CustomColorProgressBar.html

<div class='{style.wrap}'>
  <div class='{style.bar}' style='{progressBarStyles}'>
    <div class='{style.text}' style='{widthStyles}'>{html}</div>
  </div>
  <div class='{style.textBack} {style.text}' style='{progressTextStyles}'>{html}</div>
</div

CustomColorProgressBarAppearance.java

import com.google.gwt.core.shared.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.safecss.shared.SafeStyles;
import com.google.gwt.safecss.shared.SafeStylesUtils;
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.safehtml.shared.SafeHtmlUtils;
import com.sencha.gxt.cell.core.client.ProgressBarCell.ProgressBarAppearance;
import com.sencha.gxt.cell.core.client.ProgressBarCell.ProgressBarAppearanceOptions;
import com.sencha.gxt.core.client.XTemplates;
import com.sencha.gxt.core.client.resources.StyleInjectorHelper;
import com.sencha.gxt.core.client.util.Format;
import com.sencha.gxt.core.client.util.Util;

public class CustomColorProgressBarAppearance implements ProgressBarAppearance {

  public interface Css3ProgressBarResources extends ClientBundle {
    @Source("CustomColorProgressBar.gss")
    Css3ProgressBarStyles styles();
  }

  public interface Css3ProgressBarStyles extends CssResource {
    String wrap();

    String bar();

    String text();

    String textBack();
  }

  public interface Css3ProgressBarTemplate extends XTemplates {
    @XTemplate(source = "CustomColorProgressBar.html")
    SafeHtml render(SafeHtml html, Css3ProgressBarStyles style, SafeStyles wrapStyles, SafeStyles progressBarStyles,
        SafeStyles progressTextStyles, SafeStyles widthStyles);
  }

  private final Css3ProgressBarStyles styles;
  private final Css3ProgressBarTemplate template;

  // ~~~~ workaround
  private String color;

  public CustomColorProgressBarAppearance() {
    this(GWT.<Css3ProgressBarResources> create(Css3ProgressBarResources.class));
  }

  public CustomColorProgressBarAppearance(Css3ProgressBarResources resources) {
    this(resources, GWT.<Css3ProgressBarTemplate> create(Css3ProgressBarTemplate.class));
  }

  public CustomColorProgressBarAppearance(Css3ProgressBarResources resources, Css3ProgressBarTemplate template) {
    styles = resources.styles();
    StyleInjectorHelper.ensureInjected(styles, false);
    this.template = template;
  }

  // ~~~~ workaround
  public void setColor(String color) {
    this.color = color;
  }

  @Override
  public void render(SafeHtmlBuilder sb, Double value, ProgressBarAppearanceOptions options) {
    value = value == null ? 0 : value;

    String text = options.getProgressText();

    if (text != null) {
      int v = (int) Math.round(value * 100);
      text = Format.substitute(text, v);
    }

    SafeHtml txt = Util.isEmptyString(text) ? Util.NBSP_SAFE_HTML : SafeHtmlUtils.fromString(text);

    SafeStyles widthStyles = SafeStylesUtils.fromTrustedNameAndValue("width", options.getWidth() + "px");

    final SafeStyles progressBarStyles;
    if (value <= 0) {
      progressBarStyles = SafeStylesUtils.fromTrustedNameAndValue("visibility", "hidden");
    } else {
      // ~~~~ workaround
      // progressBarStyles = SafeStylesUtils.fromTrustedNameAndValue("width", value * 100 + "%");
      // copied from gss. 
      String gradient = " " + color + " 0%, " + color + " 100%";
      String backgroundColor = "background: -webkit-linear-gradient(top," + gradient + ");";
      backgroundColor += "background: -ms-linear-gradient(top," + gradient + ");";
      backgroundColor += "background: linear-gradient(to bottom," + gradient + ");";

      double w = value * 100;
      progressBarStyles = SafeStylesUtils.fromTrustedString("width: " + w + "%;" + backgroundColor);
      
      
    }
    
    // ~~~~~ Add text 
    SafeStyles progressTextStyles = SafeStylesUtils.fromTrustedString("background-color: #ffeebb;");

    sb.append(template.render(txt, styles, null, progressBarStyles, progressTextStyles, widthStyles));

  }
}

GridWithCustomProgress.java

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.editor.client.Editor.Path;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.cell.core.client.ProgressBarCell;
import com.sencha.gxt.core.client.IdentityValueProvider;
import com.sencha.gxt.core.client.ValueProvider;
import com.sencha.gxt.core.client.util.DateWrapper;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.data.shared.ModelKeyProvider;
import com.sencha.gxt.data.shared.PropertyAccess;
import com.sencha.gxt.test.client.grid_progress.triton.CustomColorProgressBarAppearance;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.grid.ColumnConfig;
import com.sencha.gxt.widget.core.client.grid.ColumnHeader;
import com.sencha.gxt.widget.core.client.grid.ColumnModel;
import com.sencha.gxt.widget.core.client.grid.Grid;
import com.sencha.gxt.widget.core.client.grid.GridView;

public class GridWithCustomProgress implements EntryPoint {

  // custom cell to get the model, and use it for figuring out color
  public class CustomProgressCell extends AbstractCell<Stock> {
    // Custom appearance now has a setColor
    private CustomColorProgressBarAppearance appearance = new CustomColorProgressBarAppearance();

    // appearance is set to progress bar cell
    private ProgressBarCell progressBarCell = new ProgressBarCell(appearance);

    public CustomProgressCell() {
      progressBarCell.setProgressText("{0}% Utilized");
    }

    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context, Stock value, SafeHtmlBuilder sb) {
      // choosing a color can be done however you want. I provided a custom cell with the identity model, so any logic
      // can be used.
      Double progressValue = value.getProgressData().getProgress();
      // set the color before render
      GWT.log("setColor=" + value.getProgressData().getColor());
      appearance.setColor(value.getProgressData().getColor());

      progressBarCell.render(context, progressValue, sb);
    }
  }

  @Override
  public void onModuleLoad() {
    ContentPanel cp = new ContentPanel();
    cp.setPixelSize(800, 800);
    cp.add(createGrid());

    RootPanel.get().add(cp);
  }

  private static int COUNTER = 0;
  private static final StockProperties props = GWT.create(StockProperties.class);

  public Grid<Stock> createGrid() {
    ColumnConfig<Stock, String> nameCol = new ColumnConfig<Stock, String>(props.name(), 100, "Company");
    ColumnConfig<Stock, String> symbolCol = new ColumnConfig<Stock, String>(props.symbol(), 100, "Symbol");
    ColumnConfig<Stock, Double> lastCol = new ColumnConfig<Stock, Double>(props.last(), 100, "Last");
    ColumnConfig<Stock, Double> changeCol = new ColumnConfig<Stock, Double>(props.change(), 100, "Change");
    ColumnConfig<Stock, Date> lastTransCol = new ColumnConfig<Stock, Date>(props.lastTrans(), 100, "Last Updated");

    ColumnConfig<Stock, Stock> progress = new ColumnConfig<Stock, Stock>(new IdentityValueProvider<Stock>("progress"),
        300, "Progress");
    progress.setCell(new CustomProgressCell());

    List<ColumnConfig<Stock, ?>> columns = new ArrayList<ColumnConfig<Stock, ?>>();
    columns.add(nameCol);
    columns.add(symbolCol);
    columns.add(lastCol);
    columns.add(changeCol);
    columns.add(lastTransCol);
    columns.add(progress);

    ColumnModel<Stock> cm = new ColumnModel<Stock>(columns);

    ListStore<Stock> store = new ListStore<Stock>(props.key());
    store.addAll(getStocks());

    GridView<Stock> gridView = new GridView<Stock>();

    Grid<Stock> grid = new Grid<Stock>(store, cm, gridView);

    ColumnHeader<Stock> columnHeader = new ColumnHeader<Stock>(grid, cm);
    gridView.setColumnHeader(columnHeader);

    return grid;
  }

  public class ProgressData {
    private String color;
    private Double progress;

    public ProgressData(String color, Double progress) {
      this.color = color;
      this.progress = progress;
    }

    public String getColor() {
      return color;
    }

    public void setColor(String color) {
      this.color = color;
    }

    public Double getProgress() {
      return progress;
    }

    public void setProgress(Double progress) {
      this.progress = progress;
    }
  }

  public class Stock implements Serializable {
    private Integer id;
    private Double change;
    private Date date = new Date();
    private String industry = getType();
    private Double last;
    private String name;
    private Double open;
    private String symbol;
    private ProgressData progressData;

    private boolean split = Boolean.valueOf(Math.random() > .5);

    public Stock() {
      this.id = Integer.valueOf(COUNTER++);
    }

    public Stock(String name, String symbol, double open, double last, Date date, ProgressData progressData) {
      this();
      this.name = name;
      this.symbol = symbol;
      this.change = last - open;
      this.open = open;
      this.last = last;
      this.date = date;
      this.setProgressData(progressData);
    }

    public Double getChange() {
      return change;
    }

    public Integer getId() {
      return id;
    }

    public String getIndustry() {
      return industry;
    }

    public Double getLast() {
      return last;
    }

    public Date getLastTrans() {
      return date;
    }

    public String getName() {
      return name;
    }

    public Double getOpen() {
      return open;
    }

    public double getPercentChange() {
      return getChange() / getOpen();
    }

    public String getSymbol() {
      return symbol;
    }

    public boolean isSplit() {
      return split;
    }

    public void setChange(Double change) {
      this.change = change;
    }

    public void setId(Integer id) {
      this.id = id;
    }

    public void setIndustry(String industry) {
      this.industry = industry;
    }

    public void setLast(Double last) {
      this.last = last;
    }

    public void setLastTrans(Date date) {
      this.date = date;
    }

    public void setName(String name) {
      this.name = name;
    }

    public void setOpen(Double open) {
      this.open = open;
    }

    public void setSplit(boolean split) {
      this.split = split;
    }

    public void setSymbol(String symbol) {
      this.symbol = symbol;
    }

    public String toString() {
      return getName();
    }

    private String getType() {
      double r = Math.random();
      if (r <= .25) {
        return "Auto";
      } else if (r > .25 && r <= .50) {
        return "Media";
      } else if (r > .5 && r <= .75) {
        return "Medical";
      } else {
        return "Tech";
      }
    }

    public ProgressData getProgressData() {
      return progressData;
    }

    public void setProgressData(ProgressData progressData) {
      this.progressData = progressData;
    }

  }

  public List<Stock> getStocks() {
    List<Stock> stocks = new ArrayList<Stock>();
    stocks.add(new Stock("Apple Inc.", "AAPL", 125.64, 123.43, randomDate(), new ProgressData("#ffaabb", .25)));
    stocks.add(new Stock("cisco Systems, Inc.", "CSCO", 25.84, 26.3, randomDate(), new ProgressData("#bbaabb", .35)));
    stocks.add(new Stock("Cisco Inc.", "GOOG", 516.2, 512.6, randomDate(), new ProgressData("#bbccdd", .15)));
    stocks.add(new Stock("Intel Corporation", "INTC", 21.36, 21.53, randomDate(), new ProgressData("#bbaaff", .05)));
    stocks.add(
        new Stock("Level 3 Communications, Inc.", "LVLT", 5.55, 5.54, randomDate(), new ProgressData("#efefef", .90)));
    stocks.add(new Stock("Microsoft Corporation", "MSFT", 29.56, 29.72, randomDate(), new ProgressData("#ffffaa", 1.0)));
    stocks
        .add(new Stock("Nokia Corporation (ADR)", "NOK", 27.83, 27.93, randomDate(), new ProgressData("#aabbcc", .95)));
    stocks.add(new Stock("Oracle Corporation", "ORCL", 18.73, 18.98, randomDate(), new ProgressData("#aaaaaa", .67)));
    return stocks;
  }

  private Date randomDate() {
    DateWrapper w = new DateWrapper();
    int r = (int) (Math.random() * 10) * 10;
    w = w.addDays(-r);
    return w.asDate();
  }

  public interface StockProperties extends PropertyAccess<Stock> {
    @Path("symbol")
    ModelKeyProvider<Stock> key();

    ValueProvider<Stock, String> name();

    ValueProvider<Stock, String> symbol();

    ValueProvider<Stock, Double> last();

    ValueProvider<Stock, Double> change();

    ValueProvider<Stock, Date> lastTrans();

    ValueProvider<Stock, String> industry();

  }

}