JavaFX: How to remove border from ProgressIndicator?

Question

This is nearly the same question as this, with one slight difference. I also started seeing borders around my ProgressIndicator controls starting with Java 8u45, but I see them only when I select the 'user agent' stylesheet to Caspian. It looks terrible, but I am quite invested in the Caspian stylesheet and unwilling to change it right now. Here is some code that demonstrates the problem. Obviously, you must uncomment the comment to see the problem.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.control.ProgressIndicator;
import javafx.stage.Stage;
import javafx.geometry.Insets;

public class ProgressIndicatorWithBorder extends Application {

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

    @Override
    public void start(Stage primaryStage) {
        // this.setUserAgentStylesheet(Application.STYLESHEET_CASPIAN);
        ProgressIndicator pi = new ProgressIndicator();
        BorderPane borderPane = new BorderPane();
        borderPane.setCenter(pi);
        borderPane.setMargin(pi, new Insets(12));
        Scene scene = new Scene(borderPane, 640, 480);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

}

Answer 1

Assumptions

As the questioner haven't mentioned, the ProgressIndicator could be used in two ways:

• inderminate (is running endless)
• determinate (counts percentage from 0 to 100)

Problem

The Problem is only related to the inderminate state, because the ProgressIndicator style for the spinner seems to conflict with the Datepicker style for it's spinner. So the JavaFX Developers had choosen to make a Bugfix in Java 8u40. This was done to modena.css, as it is the default CSS of JavaFX.

But in your case you want to use the old style caspian.css. So you have to do it the same way, as they've done it here.

Kevin Rushforth (one of the JavaFX guys) has made two screenshots of the behavior:

ProgressIndicator-Bad

ProgressIndicator-Good

Solution

Make an own stylesheet file. I called mine pibug.css. Set it on the ProgressIndicator as it's stylesheet. This will not override the other defaults already set in caspian.css.

pibug.css

.progress-indicator:indeterminate > .spinner {        
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}

But this is not all, if you want your Datepicker works well with caspian.css, you need to set the following style on your Datepicker:

dpbug.css

.date-picker-popup > * > .spinner {
    -fx-spacing: 0.25em; /* 3 */
    -fx-alignment: CENTER;
    -fx-fill-height: false;
    -fx-background-color: transparent; /* this line was added */
}

Answer 2

We must copy this part from modena.css:

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

It does not need to be modified.

(Note: NwDX's answer was useful because it got me pointed in the right direction, and so I tried to edit this fact into his answer. But my edit was rejected on the basis that it deviated from the intent of original answer.)