How can I style the ProgressBar component in JavaFX

Question

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)

Tecumseh

Answer 1

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:

• JavaFX ProgressBar: how to change bar color?

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:

JavaFX 8 (modena) on a Mac:

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

• ProgressBar Animated Javafx

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

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

Answered in:

• Draw a String onto a ProgressBar, like JProgressBar?

how to change the height of a progress bar:

Answered in:

• How to get narrow progres bar in JavaFX?

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:

• How to get a small ProgressBar in JavaFX

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

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

• modena.css for Java 8.
• caspian.css for Java 7.

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

Hatbox

Answer 2

A minimalistic modern styling like the add-on Gluon has it, ideally for a load bar in the header:

-no radius

-no padding to the bar

-simple colours

.progress-bar {
    -fx-accent: rgba(0, 138, 230, 0.85);
}

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

.progress-bar > .track {
    -fx-border-radius: 0;
    -fx-background-radius: 0;
    -fx-text-box-border: transparent;
    -fx-control-inner-background: transparent;
    -fx-background-color: rgba(255, 255, 255, 0.1);
}

thank you very much for the information about the styling (.track and .bar) which I could not intuitively find.

Sheya

Answer 3

css file:

.green-bar {
    -fx-accent: #27BB9A;
}

assign this class to the progressbar

Anglicanism

Thanks for answering this question! It looks like you've addressed part of the question, but there are two more components of the question. Can you also help with those? – Iffy