Yoav Kadosh Yoav Kadosh - 4 months ago 58
CSS Question

How can I style the ProgressBar component in JavaFX

I am trying to add custom css styling to the JavaFX ProgressBar component but I couldn't find any information on the topic. I am looking for the css class names and the css commands that are required to:


  • set the color of the progress bar itself

  • set the background color of the progress bar (not the same as setting the background color)

  • add a custom text node on top of the progress bar (to show the different states)


Answer

I have marked this answer as community wiki.

If you have ideas for JavaFX ProgressBar styling outside of the original initial styling queries, please edit this post to add your styling ideas (or to link to them).

set the color of the progress bar itself

Answered in:

The answer demonstrates

  1. Dynamic styling of the progress bar, so that the bar's color changes depending upon the amount of progress made.
  2. Static styling of the progress bar, which just sets the bar's color forever to a defined color.

JavaFX 7 (caspian) on a Windows PC:

colored progress bar

JavaFX 8 (modena) on a Mac:

progress bar mac

Sometimes people like barbershop pole style gradients, like the bootstrap striped style:

barbershop quartet

set the background color of the progress bar (not the same as setting the background color)

Define an appropriate css style for the progress bar's "track":

.progress-bar > .track {
  -fx-text-box-border: forestgreen;
  -fx-control-inner-background: palegreen;
}

progress-bar background color

add a custom text node on top of the progress bar (to show the different states)

Answered in:

string on a progress bar

how to change the height of a progress bar:

Answered in:

Sample CSS:

.progress-bar .bar { 
    -fx-padding: 1px; 
    -fx-background-insets: 0; 
}

José Pereda gives a nice comprehensive solution for narrow progress bars in his answer to:

small progress

I am looking for the css class names and the css commands

The place to look is in the default JavaFX style sheet.

The ProgressBar style definitions for caspian (Java 7) are:

.progress-bar {
    -fx-skin: "com.sun.javafx.scene.control.skin.ProgressBarSkin";
    -fx-background-color:
        -fx-box-border,
        linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%));
    -fx-background-insets: 0, 1;
    -fx-indeterminate-bar-length: 60;
    -fx-indeterminate-bar-escape: true;
    -fx-indeterminate-bar-flip: true;
    -fx-indeterminate-bar-animation-time: 2;
}

.progress-bar .bar {
    -fx-background-color:
        -fx-box-border,
        linear-gradient(to bottom, derive(-fx-accent,95%), derive(-fx-accent,10%)),
        linear-gradient(to bottom, derive(-fx-accent,38%), -fx-accent);
    -fx-background-insets: 0, 1, 2;
    -fx-padding: 0.416667em; /* 5 */
}

.progress-bar:indeterminate .bar {
    -fx-background-color: linear-gradient(to left, transparent, -fx-accent);
}

.progress-bar .track {
     -fx-background-color:
        -fx-box-border,
        linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
    -fx-background-insets:  0, 1;
}

.progress-bar:disabled {
    -fx-opacity: -fx-disabled-opacity;
}

The progress bar style definitions for modena (Java 8) are:

.progress-bar {
    -fx-indeterminate-bar-length: 60;
    -fx-indeterminate-bar-escape: true;
    -fx-indeterminate-bar-flip: true;
    -fx-indeterminate-bar-animation-time: 2;
}
.progress-bar > .bar {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-accent, -7%), derive(-fx-accent, 0%), derive(-fx-accent, -3%), derive(-fx-accent, -9%) );
    -fx-background-insets: 3 3 4 3;
    -fx-background-radius: 2;
    -fx-padding: 0.75em;
}
.progress-bar:indeterminate > .bar {
    -fx-background-color: linear-gradient(to left, transparent, -fx-accent);
}
.progress-bar > .track {
      -fx-background-color: 
          -fx-shadow-highlight-color,
          linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
          linear-gradient(to bottom, 
            derive(-fx-control-inner-background, -7%),
            derive(-fx-control-inner-background, 0%),
            derive(-fx-control-inner-background, -3%),
            derive(-fx-control-inner-background, -9%)
          );
    -fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
    -fx-background-radius: 4, 3, 2; /* 10, 9, 8 */
}

The JavaFX CSS reference guide contains general information on the use of CSS in JavaFX (which differs somewhat from the use of CSS in HTML).

Comments