20

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)

3 Answers 3

65

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

3

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.enter image description here

0

css file:

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

assign this class to the progressbar

1
  • 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? Nov 14, 2018 at 15:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.