How to get a small ProgressBar in JavaFX

Question

I'm trying to get an iTunes like progress bar that is very small (height of about 5px) but I can't seem to go any lower than 19 or 20px.

I tried setting -fx-max-height with no avail, also on the surrounding pane. Note that this value does indeed change the height - I just can't get it less than about 20px.

Any ideas how to achieve that? I'd like to avoid using a plain rectangle for indicating progress because of loss of semantic and support of assistive technology.

Thanks.

Answer 1

The ProgressBar default styling is the reason why you can't reduce its height.

As we can see in the modena.css file for the progress-bar CSS selector:

.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: 0.583em; *//* 7 */
    -fx-background-radius: 2;
    -fx-padding: 0.75em;
}

two CSS properties are responsible for this: -fx-padding for the height of the blue inner bar and -fx-background-insets for the height of the surrounding gray bar.

So you can customize this selector as you need. For instance, with these properties you will have 5 pixels height:

.progress-bar > .bar {
    -fx-background-insets: 1 1 2 1;
    -fx-padding: 0.20em;
}

No need for height settings on your code:

@Override
public void start(Stage primaryStage) {

    ProgressBar pb = new ProgressBar(0.4);
    pb.setPrefWidth(200);
    StackPane root = new StackPane(pb);

    Scene scene = new Scene(root, 300, 200);
    scene.getStylesheets().add(getClass().getResource("root.css").toExternalForm());
    primaryStage.setTitle("Hello World!");
    primaryStage.setScene(scene);
    primaryStage.show();
}