JavaFX set diffenrent styles to ProgressIndicator and Spinner

Question

at the moment i'm working with a Progress-Indicator and a bunch of spinners.

I want to give them different styles in one CSS-File. My Problem is, that the Progress-Indicator always uses the style of I planned for the spinners.

I did an little application as example:

package application;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ProgressIndicator;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            Pane root = new Pane();
            Scene scene = new Scene(root,400,400);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());

            ProgressIndicator value = new ProgressIndicator(-1.0);
            value.getStyleClass().forEach(clazz -> System.out.println(clazz));
            value.setPrefHeight(100);
            value.setPrefWidth(100.0);

            root.getChildren().add(value);



            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

I want to have my Progress-Indicator a red background and trying it todo like this:

.progress-indicator > .indicator {
    -fx-background-color: red;
}

but without styling the spinner it won't work. so i append this:

.spinner {
    -fx-background-color: red;
}

The problem is, that all my spinners now got red backgrounds. I could do it by using diffenrent CSS-Files. But It would be way better if I only need one CSS-File.

Thanks in advance for your time and help!

Answer 1

You faced this bug in modena.css which is fixed in 8u40. Now you can safely change the background color of progress indicator with:

.progress-indicator:indeterminate > .spinner {
    /** Applying to undo styling from .spinner, reported in RT-37965 */
    -fx-background-color: red;
    /* originally was */
    /*-fx-background-color: transparent;*/
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}

Answer 2

I think you can create styles for each individual class?

Can't you add a custom style class for each spinner and apply that using spinner.getStyleClass().add("my-style")?

This will allow you to define may classes at a more specified level than just at the object level.